css媒体查询.docx

1、css媒体查询1 输出可见区域高度与宽度的比例 media features aspect-ratio !- 时间：2016-07-15 描述： 定义输出设备中的页面可见区域宽度与高度的比率。 本特性接受min和max前缀，因此可以派生出min-aspect-ratio和max-aspect-ratio两个媒体特性。 语法： aspect-ratio： 取值： ： 指定比率 - body background-color: deepskyblue; media screen and (max-aspect-ratio:20/11) body color: #f00; 当输出设备中的页面可见宽度

2、与高度比率小于或等于20:11时，本行文字显示为红色 2 输出彩色原件个数 media features color !- 描述： 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 与色彩color不同，媒体特性color的取值只能是，用来表示色彩数。 本特性接受min和max前缀，因此可以派生出min-color和max-color两个媒体特性。 语法： color： 取值： ： 用用整数值来定义彩色原件数。不允许负值 - body background-color: deepskyblue; color: #f00; media screen and (color) body

3、 当你的输出设备是彩色的，本行文字显示为红色 3 彩色表中条目数 color-index of media features !- 描述： 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 本特性接受min和max前缀，因此可以派生出min-color-index和max-color-index两个媒体特性。 语法： color-index： 取值： ： 用用整数值来定义彩色查询表中的条目数。不允许负值 - body background-color: deepskyblue; media screen and (color-index) body color: #f0

4、0; 当你的输出设备使用了彩色查询表时，本行文字显示为红色 4 定义屏幕输出 media features device-aspect-ratio !- 描述： 定义输出设备的屏幕可见宽度与高度的比率。 如常讲的显示器屏幕比率：4/3, 16/9, 16/10 本特性接受min和max前缀，因此可以派生出min-device-aspect-ratio和max-device-aspect-ratio两个媒体特性。 语法： device-aspect-ratio： 取值： ： 指定比率 - body background-color: deepskyblue; media screen and (

5、device-aspect-ratio:16/10) body color: #f00; 当你将输出设备屏幕分辨率为16:10时，本行文字显示为红色 4 定义屏幕可见高度 media features device-height !- 描述： 定义输出设备的屏幕可见高度。 本特性接受min和max前缀，因此可以派生出min-device-height和max-device-height两个媒体特性。 语法： device-height： 取值： ： 用长度值来定义高度。不允许负值 - body background-color: deepskyblue; media screen and (m

6、in-device-height:800px) body color: #f00; 当你的输出设备分辨率高度设置为800px时，本行文字显示为红色 5 定义屏幕可见宽度 media features device-width !- 描述： 定义输出设备的屏幕可见宽度。 本特性接受min和max前缀，因此可以派生出min-device-width和max-device-width两个媒体特性。 语法： device-width： 取值： ： 用长度值来定义宽度。不允许负值 - body background-color: deepskyblue; media screen and (device

7、-width:1024px) body color: #f00; 当你的输出设备分辨率宽度设置为1024px时，本行文字显示为红色 6 查询输出点阵 grid of media features !- 描述： 用来查询输出设备是否使用栅格或点阵。 本特性不接受min和max前缀。 语法： grid： 取值： ： 用整数值来定义是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否 - body background-color: deepskyblue; media screen and (grid:0) body color: #f00; 当你的输出设备未使用栅格或点阵时，本行文字显示

8、为红色 7 定义页面可见高度宽度 media features height !- 描述： 定义输出设备中的页面可见区域高度。 与盒模型height不同，媒体特性height的取值只能是。 本特性接受min和max前缀，因此可以派生出min-height和max-height两个媒体特性。 语法： height： 取值： ： 用长度值来定义高度。不允许负值 - body background-color: deepskyblue; media all and (min-height:300px) and (max-height:500px) body color: #f00; 当页面可见高度大

9、于300px小于500px时，本行文字显示为红色。试着调整你的viewport使得页面高度介于这个区间以查看效果 8 缓冲区每个像素包含单个原件个数 monochrome of media features !- 描述： 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 本特性接受min和max前缀，因此可以派生出min-monochrome和max-monochrome两个媒体特性。 语法： monochrome： 取值： ： 用整数值来定义宽度。不允许负值 - body background-color: deepskyblue; media screen

10、and (monochrome) body color: #f00; 当你的输出设备是单色的（黑白色），本行文字显示为红色 9 可见区域宽度是否大于高度 media features orientation body background-color: deepskyblue; media not screen and (orientation:portrait) body color: #f00; 当输出设备中的页面可见宽度大于高度时，本行文字显示为红色 10 定义设备分辨率 resolution of media features !- 描述： 定义设备的分辨率。如：96dpi, 300d

11、pi, 118dpcm 本特性接受min和max前缀，因此可以派生出min-resolution和max-resolution两个媒体特性。 语法： resolution： 取值： ： 用整数值来定义宽度。不允许负值 - body background-color: deepskyblue; media screen and (min-resolution:96dpi) body color: #f00; 当你的输出设备分辨率大于或等于96dpi时，本行文字显示为红色 11定义电视类扫描工序 scan of media features body background-color: deeps

12、kyblue; media tv and (scan:progressive) body color: #f00; 当你的电视类设备的扫描工序为progressive时，本行文字显示为红色 12 定义可见宽度区域 media features width !- 描述：定义输出设备中的页面可见区域宽度。 与盒模型width不同，媒体特性width的取值只能是。 本特性接受min和max前缀，因此可以派生出min-width和max-width两个媒体特性。 语法： width： 取值： ： 用长度值来定义宽度。不允许负值 - body background-color: deepskyblue; media all and (min-width:200px) and (max-width:1000px) body color: #f00; 当页面可见宽度大于500px小于1000px时，本行文字显示为红色。试着调整你的viewport使得页面宽度介于这个区间以查看效果