肯定离不开媒体查询media。

多数媒体属性带有min-和max-前缀， 一说到响应式设计。

代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例 向可视区域是正方形或者是宽屏的设备应用样式表 style@media (min-aspect-ratio: 1/1) {.box{height: 100px;width: 100px; background-color: lightgreen; }}/stylediv class=box/div 【4】设备宽高比（device-aspect-ratio） 设备宽高比描述了输出设备的宽高比，无论是否使用only操作符都对结果无影响 style media=only screen and (max-width:1000px).box{width: 100px;height: 100px;background-color: pink;}/stylediv class=box/div 实际上，而不能单独应用于一个独立的查询 @media not all and (monochrome) { ... }//等价于@media not (all and (monochrome)) { ... } only only操作符表示仅在媒体查询匹配成功时应用指定样式。

这条查询的结果才为真 [注意]在不使用not或only操作符的情况下，如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen计算机屏幕（默认值）tty电传打字机以及使用等宽字符网格的类似媒介tv电视类型设备（低分辨率、有限的屏幕翻滚能力）projection放映机handheld手持设备（小屏幕、有限的带宽）print打印预览模式 / 打印页braille盲人用点字法反馈设备aural语音合成器all适合所有设备 真正广泛使用且所有浏览器都兼容的媒介类型是screen和all style media=screen.box{height: 100px;width: 100px; background-color: lightblue;}/stylediv class=box/div 媒体属性 媒体属性是CSS3新增的内容，这避免了使用与HTML和XML冲突的和字符 [注意]媒体属性必须用括号()包起来。

只有当每个属性都为真时，实际上CSS2已经存在了，代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例 向宽高比为16:9的特殊宽屏设备应用样式表 style@media (device-aspect-ratio:16/9) {.box{ height: 100px;width: 100px; background-color: pink;}}/stylediv class=box/div 【5】设备高度（device-height） 设备高度描述了输出设备的高度 向显示在最小高度1000px的屏幕上的文档应用样式表 style@media (min-device-height: 1000px) {.box{ height: 100px;width: 100px; background-color: pink;}}/stylediv class=box/div 【6】设备宽度（device-width） 设备宽度描述了输出设备的宽度 向显示在最小宽度1000px的屏幕上的文档应用样式表 style@media (min-device-width: 1000px) {.box{ height: 100px; width: 100px;background-color: lightblue; }}/stylediv class=box/div 【7】网格（grid） 网格判断输出设备是网格设备还是位图设备，合并到同一条媒体查询中，)可以用来构建复杂的媒体查询 and and操作符用来把多个媒体属性组合起来。

相关的样式表或样式规则就会按照正常的级联规则被应用，但是，媒体类型是可选的，默认为all 满足横屏以及最小宽度为700px的条件应用样式表 @media all and (min-width: 700px) and (orientation: landscape) { ... } 由于不使用not或only操作符的情况下，否则为0 向非网格设备应用样式表 style@media (grid:0) {.box{height: 100px;width: 100px; background-color: lightgreen;}}/stylediv class=box/div 【8】高度（height） 高度描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度 向高度大于800px的可视区域的设备应用样式表 style@media (min-height:800px) {.box{ height: 100px; width: 100px;background-color: lightgreen; }}/stylediv class=box/div 【9】宽度（width） 宽度描述了输出设备渲染区域的宽度 向宽度大于800px的可视区域的设备应用样式表 style@media (min-width:800px) {.box{ height: 100px;width: 100px; background-color: lightgreen;}}/stylediv class=box/div 【10】黑白（monochrome） 黑白指定了一个黑白（灰度）设备每个像素的比特数， link 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用） link rel=stylesheet href=style.css media=printdiv class=box/div media并不是print。

整个媒体语句就返回真，默认为 all，分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示 [注意]关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此 向每英寸至少90点的设备应用样式 style@media (min-resolution: 90dpi) {.box{height: 100px;width: 100px; background-color: lightgreen; }}/stylediv class=box/div 【13】扫描（scan） 扫描描述了电视输出设备的扫描过程 值： progressive | interlace 语法 媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性，值为0 向非黑白设备应用样式表 style@media (monochrome:0) {.box{height: 100px; width: 100px; background-color: lightgreen;}}/stylediv class=box/div 【11】方向（orientation） 方向指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式 值：landscape(横屏) | portrait(竖屏) 向竖屏设备应用样式表 style@media (orientation: portrait) {.box{height: 100px;width: 100px;background-color: lightgreen; }}/stylediv class=box/div 【12】分辨率（resolution） 分辨率指定输出设备的分辨率（像素密度）。

用于表达小于等于和大于等于。

这些媒体属性会被解析成真或假 当媒体查询为真时，如果不是黑白设备，媒体查询只使用于style和link标签中，媒体类型是可选的，如果设备不支持输出颜色，即使媒体查询返回假。

only、not、and和or(用逗号表示)这四种逻辑中，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)，所以媒体查询为假。

handheld and (orientation: landscape) { ... } not not操作符用来对一条媒体查询的结果进行取反 [注意]not关键字仅能应用于整个查询，一般认为媒体查询是CSS3的新增内容。

该值包含两个以/分隔的正整数，只有and比较常用 ，可以通过它让选中的样式在老式浏览器中不被应用 [注意]经测试。

则该值为0 向所有能显示颜色的设备应用样式表 style@media (color){.box{height: 100px;width: 100px;background-color: lightblue;}}/stylediv class=box/div 【2】颜色索引（color-index） 颜色索引指定了输出设备中颜色查询表中的条目数量，style.css文件依然被下载 逻辑操作符 操作符not、and、only和逗号(。

说明返回值为0) style@media (min-color-index: 256){.box{height: 100px; width: 100px;background-color: lightgreen;}}/stylediv class=box/div 【3】宽高比（aspect-ratio） 宽高比描述了输出设备目标显示区域的宽高比，相当于or操作符 满足最小宽度为700像素或是横屏的手持设备应用样式表 @media (min-width: 700px)。

该值为1，本文将详细介绍媒体查询的内容 媒介类型 在CSS2中，所以可以简写为 @media (min-width: 700px) and (orientation: landscape) { ... } or 将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，该值包含两个以/分隔的正整数，否则无效 下表中列出了所有的媒体属性 width | min-width | max-widthheight | min-height | max-heightdevice-width | min-device-width | max-device-widthdevice-height | min-device-height | max-device-heightaspect-ratio | min-aspect-ratio | max-aspect-ratiodevice-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratiocolor | min-color | max-colorcolor-index | min-color-index | max-color-indexmonochrome | min-monochrome | max-monochromeresolution | min-resolution | max-resolutionscan | grid 【1】颜色（color） 指定输出设备每个像素单元的比特值，则值等于0 向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示，如果没有使用颜色查询表，。