媒体查询,这个词还是没完全明白,看了长篇大论的解释也没能明白.目前只知道它可以实现在不同屏幕设备上载入不同CSS的功能.
1.为什么要在不同屏幕设备上加载不同的CSS表呢,因为有这种要求了,屏幕大小不同,页面的布局也要相应变化,再者,像手机这样小屏幕主要还是浏览功能,一些表单就不用显示出来了.只在桌面上显示就好了.有这些类似的需求,就有必要做几套CSS了
2.代码
<link href="phone.css" media="only screen and (min-width:200px) and (max-width:760px)" rel="stylesheet" />
<link href="desktop.css" media="only screen and (min-width:767px) and (max-width:1920px)" rel="stylesheet" />
这两句话是加载CSS样式表,看media属性:
only screen // 只在有显示屏的设备上使用 (当然有的设备是不需要显示屏的)
min-width:200px // 最小宽度200像素时
max-width:800px // 最大宽度800像素时,
这三句话使用and连接起来, 表示这些条件都要满足,后两句是说宽度在200-760像素之间的时候,加载这个样式.(200-760范围,一般是手机屏幕的大小)
同理,第二行说明在767-1920像素宽度的设备屏幕上加载.有这种宽度的一般是桌面电脑.
3.样式表
里面的class类名字一样,里面的实现根据要求有区别
原文：http://www.cnblogs.com/mirrortom/p/5032891.html