css媒体查询Word文档下载推荐.docx

css媒体查询Word文档下载推荐.docx

《css媒体查询Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《css媒体查询Word文档下载推荐.docx（15页珍藏版）》请在冰豆网上搜索。

2016-07-15

描述：

定义输出设备中的页面可见区域宽度与高度的比率。

本特性接受min和max前缀，因此可以派生出min-aspect-ratio和max-aspect-ratio两个媒体特性。

语法：

aspect-ratio：

ratio>

取值：

<

：

指定比率

-->

style>

body{

background-color:

deepskyblue;

}

@mediascreenand（max-aspect-ratio:

20/11）{

body{

color:

#f00;

}

/style>

/head>

body>

divclass="

test"

当输出设备中的页面可见宽度与高度比率小于或等于20:

11时，本行文字显示为红色<

/div>

script>

/script>

/body>

/html>

2输出彩色原件个数

mediafeaturescolor<

定义输出设备每一组彩色原件的个数。

如果不是彩色设备，则值等于0

与色彩color不同，媒体特性color的取值只能是<

integer>

，用来表示色彩数。

本特性接受min和max前缀，因此可以派生出min-color和max-color两个媒体特性。

color：

用用整数值来定义彩色原件数。

不允许负值

color:

@mediascreenand（color）{

当你的输出设备是彩色的，本行文字显示为红色<

3彩色表中条目数

color-indexofmediafeatures<

定义在输出设备的彩色查询表中的条目数。

如果没有使用彩色查询表，则值等于0

本特性接受min和max前缀，因此可以派生出min-color-index和max-color-index两个媒体特性。

color-index：

用用整数值来定义彩色查询表中的条目数。

@mediascreenand（color-index）{

当你的输出设备使用了彩色查询表时，本行文字显示为红色<

4定义屏幕输出

mediafeaturesdevice-aspect-ratio<

定义输出设备的屏幕可见宽度与高度的比率。

如常讲的显示器屏幕比率：

4/3,16/9,16/10

本特性接受min和max前缀，因此可以派生出min-device-aspect-ratio和max-device-aspect-ratio两个媒体特性。

device-aspect-ratio：

@mediascreenand（device-aspect-ratio:

16/10）{

当你将输出设备屏幕分辨率为16:

10时，本行文字显示为红色<

4定义屏幕可见高度

mediafeaturesdevice-height<

定义输出设备的屏幕可见高度。

本特性接受min和max前缀，因此可以派生出min-device-height和max-device-height两个媒体特性。

device-height：

length>

用长度值来定义高度。

body{

@mediascreenand（min-device-height:

800px）{

当你的输出设备分辨率高度设置为800px时，本行文字显示为红色<

5定义屏幕可见宽度

mediafeaturesdevice-width<

定义输出设备的屏幕可见宽度。

本特性接受min和max前缀，因此可以派生出min-device-width和max-device-width两个媒体特性。

device-width：

用长度值来定义宽度。

@mediascreenand（device-width:

1024px）{

当你的输出设备分辨率宽度设置为1024px时，本行文字显示为红色<

6查询输出点阵

gridofmediafeatures<

用来查询输出设备是否使用栅格或点阵。

本特性不接受min和max前缀。

grid：

用整数值来定义是否使用栅格或点阵。

只有1和0才是有效值，1代表是，0代表否

@mediascreenand（grid:

0）{

当你的输出设备未使用栅格或点阵时，本行文字显示为红色<

7定义页面可见高度宽度

mediafeaturesheight<

定义输出设备中的页面可见区域高度。

与盒模型height不同，媒体特性height的取值只能是<

。

本特性接受min和max前缀，因此可以派生出min-height和max-height两个媒体特性。

height：

@mediaalland（min-height:

300px）and（max-height:

500px）{

当页面可见高度大于300px小于500px时，本行文字显示为红色。

试着调整你的viewport使得页面高度介于这个区间以查看效果<

8缓冲区每个像素包含单个原件个数

monochromeofmediafeatures<

定义在一个单色框架缓冲区中每像素包含的单色原件个数。

如果不是单色设备，则值等于0

本特性接受min和max前缀，因此可以派生出min-monochrome和max-monochrome两个媒体特性。

monochrome：

用整数值来定义宽度。

@mediascreenand（monochrome）{

当你的输出设备是单色的（黑白色），本行文字显示为红色<

9可见区域宽度是否大于高度

mediafeaturesorientation<

定义输出设备中的页面可见区域高度是否大于或等于宽度。

orientation：

portrait|landscape

portrait：

指定输出设备中的页面可见区域高度大于或等于宽度

landscape：

除portrait值情况外，都是landscape

@medianotscreenand（orientation:

portrait）{

当输出设备中的页面可见宽度大于高度时，本行文字显示为红色<

10定义设备分辨率

resolutionofmediafeatures<

定义设备的分辨率。

如：

96dpi,300dpi,118dpcm

本特性接受min和max前缀，因此可以派生出min-resolution和max-resolution两个媒体特性。

resolution：

resolution>

不允许负值

@mediascreenand（min-resolution:

96dpi）{

当你的输出设备分辨率大于或等于96dpi时，本行文字显示为红色<

11定义电视类扫描工序

scanofmediafeatures<

定义电视类设备的扫描工序。

scan：

progressive|interlace

progressive：

连续扫描

interlace：

交织扫描

body{

@mediatvand（scan:

progressive）{

当你的电视类设备的扫描工序为progressive时，本行文字显示为红色<

12定义可见宽度区域

mediafeatureswidth<

定义输出设备中的页面可见区域宽度。

与盒模型width不同，媒体特性width的取值只能是<

本特性接受min和max前缀，因此可以派生出min-width和max-width两个媒体特性。

width：

@mediaalland（min-width:

200px）and（max-width:

1000px）{

当页面可见宽度大于500px小于1000px时，本行文字显示为红色。

试着调整你的viewport使得页面宽度介于这个区间以查看效果<