html,body{高度:100%;}body{背景色：浅绿色；}<样式emedia="screenand(min-width:400px)">body{background-color:#000;}介绍媒体查询（MediaQueries）早在css2时代就已经存在。css工作时修改的语法。引入媒体查询以允许添加表达式以确定媒体的上下文，以便应用不同的样式表。换句话说，它允许我们更改页面布局以精确适应不同的设备，而无需更改内容。(1)由于使用mediaquery来控制样式，所以样式的使用无外乎以下规则：使用link导入，使用style标签使用样式属性，使用@import导入并显式使用mediaquery声明样式.我们有以下三种方法：使用链接导入时使用media属性使用style标签时添加media属性使用样式中的条件规则组先来看看如何使用链接：的基本外观使用媒体查询后的链接标签如下（一）：一次mediaquery用于修饰link标签，表示满足mediaquery则启用该样式，同样的规则也适用于style标签。例子的解释，那么，对于上面这句话media="screenand(min-width:400px)"，可以解释为：当屏幕的宽度大于等于400px时应用这个样式规则.媒体查询的三部分在上面的例子中，我们可以看到多了一个media属性，media中的内容就是媒体查询的语法，可以这样解释：一个媒体查询由一个选定的媒体类型和零个或多个表达式，这些表达式使用宽度、高度和颜色等媒体特性来限制样式表的范围。CSS3中添加的媒体查询允许为特定范围的输出设备定制内容呈现，而无需更改内容本身。(2)看似复杂，实际上一条媒体查询语句分为以下三部分：媒体类型——描述设备的媒体特性（mediafeatures/mediafunctions）——描述设备的状态逻辑运算符——connectmultipleRules那么用上面的例子说screeninmedia="screenand(min-width:400px)"是媒体类型，下面的and叫做逻辑运算符，and(min-width:400px)叫做媒体功能。max和min的基本含义。max指的是不大于，例如max-width:1200px=不大于1200px，当使用本条规则中的样式时，min指的是不小于，例如min-width:1200px=不小于1200px时使用规则中的stylemediatypelist，如前所述，mediaquery在css2中已经存在，所以在css2时代提出了很多mediatypes，其中只有screen和all被广泛使用，很多都被删除了。将常用的媒体类型css2制定成screen，主要适用于彩色电脑屏幕。All适用于所有设备（媒体类型的默认值）。不常用的媒体类型是printspeechcss2.1。mediafeaturenamefeaturewidthvisiblewidthheightvisibleheightcompletelistofmediafeatures媒体特性列表：https://developer.mozilla.org...媒体查询声明的详细规则，你可以运行这个例子来感受一下：html,body{高度:100%;}body{背景色：浅绿色；}<样式emedia="screenand(min-width:400px)">body{background-color:#000;}test本例中，当屏幕宽度大于400像素时，body的背景色为黑色，但一旦低于400像素，它就会变成绿松石色。一个媒体查询语句可以由多个媒体查询组成（以逗号分隔），单个规则由以下格式组成：typenumberdefaultvaluemediatype0/1allmediacharacteristicsn(n!=0)logicaloperatorn-1means一个媒体查询中可以有多个规则，对于一个规则，需要一个媒体类型（默认全部）和n个媒体特性（可选），它们之间的连接使用逻辑运算符连接。不填写媒体类型对应的默认规则时：(max-width:400px)=alland(max-width:400px)(max-width:400px)and(min-width:200px)=alland(max-width:400px)and(min-width:200px)(max-width:400px),(min-width:200px)=alland(max-width:400px),alland(min-width:200px)媒体featureprefix上面的示例媒体查询有如下内容screenand(width:400px)如果你查看媒体特征列表，你会发现没有提到min-的内容。大多数媒体特征都有前缀，媒体特征前缀主要用于限制媒体特征的范围。max-xxx小于指定的最大值返回truemin-xxx大于指定的最小值返回true逻辑运算符所谓逻辑运算符就是编程中的逻辑运算符，用于连接多个媒体特征表达式。显示了两个逻辑运算符：notformatching否定接收到的媒体查询，只有当连接的两条规则都建立时才返回true。注意：默认情况下，以逗号分隔的多个媒体查询以or的形式书写，也就是说逗号等同于or运算符。有一个特别的:only不支持更高级媒体类型的浏览器在检测到使用此样式的唯一修改Pixel设备时将丢弃此规则。示例2：(min-width:700px)和(orientation:landscape)当宽度大于700像素且屏幕为水平时使用此样式。示例3：handheldand(max-width:20em),screenand(max-width:30em)表示此CSS应用于宽度小于20em的手持设备，或宽度小于30em的屏幕。Conditionalrulegroups所谓conditionalrulegroup就是valuemedia的声明不在link标签和style标签上，而是在css代码中，我们可以使用条件规则组来套用一段css代码，当它满足媒体查询。用法（BootStrap中的样式代码）@media(min-width:768px){.lead{font-size:21px}}优先级属性与样式在此示例中：html,body{高度:100%;}body{背景色：浅绿色；}@mediascreenand(min-width:400px){body{background-color:#000;}}teststyle标签上声明的属性与内部条件规则组媒体查询设计一致，但是内部条件规则组覆盖了media查询外部样式。可以看到它们之间其实没有优先级之分，只有执行的先后顺序，后面执行的规则会覆盖前面的规则。css中的优先级考虑如下CSSwithmediaqueriesStyle:body{background-color:gray;}@mediascreenand(max-width:960px){body{background-color:red;}}@mediascreenand(max-width:768px){body{background-color:orange;}}@mediascreenand(max-width:550px){body{背景颜色：黄色；}}@mediascreenand(max-width:320px){body{background-color:green;}}这些媒体查询的效果是当页面宽度超过960px时显示灰色，并且随着屏幕宽度的减小而改变样式。在没有mediaquery的情况下使用适合当前页面最大默认样式的mediaquery相当于设置max-width:+∞虽然实际的mediaquery中并没有infinity属性。媒体查询从高到低的排列其实是符合css设计的，即：一个元素匹配多个样式，只有最后一个样式会应用到该元素，否则会覆盖之前符合条件的样式。如果页面宽度为300px的话，可以使用max-width:320px。根据规则，max-width:550px也满足查询条件。页面之所以在宽度为300px时不匹配max-width:550px，是因为max-width:550px也满足匹配条件。width:320px更靠后。如果将不使用媒体查询的样式放在样式的末尾，无论页面如何缩放，body将始终为灰色，因为它匹配所有宽度并覆盖了之前所有包含媒体查询的条件。所以css中使用mediaquery的优先级是：不使用query的放在最前面，包含mediaquery的样式从高到低按降序排列链接中的优先级修改上面的内容example把它变成一个link标签，变成如下：样式表"href="./css/768.css"media="screenand(max-width:768px)">(max-width:550px)">其实这个方法的效果是和css写的一样。因为css规则最终应用的是HTML中的书写顺序，而这个顺序和css中的顺序是一致的，所以效果也是一致的。但是使用这种方式会导致浏览器加载多个css文件，增加请求负担。并且浏览器不会根据媒体查询动态加载样式，它只是一次性导入所有样式。引述和参考(1)http://www.swordair.com/blog/...(2)https://developer.mozilla.org...(3)https://developer.mozilla.org...https://developer.mozilla.org...https://www.zhangxinxu.com/wo...添加更详细的例子：http://www.cnblogs.com/lguow/...Commonmistakeswhen使用媒体查询：https://blog.csdn.net/qq_3755...计算机分辨率对应的媒体查询：https://blog.csdn.net/happyde...黑坑在写例子我用两个浏览器的时候，最新的firefox和最新的chrome，有趣的是style标签上的media属性表现不同。Firefox不写也运行正常，但是chrome不行。
