css媒体查询.docx

上传人:b****4 文档编号:4245490 上传时间:2022-11-28 格式:DOCX 页数:15 大小:17.80KB
下载 相关 举报
css媒体查询.docx_第1页
第1页 / 共15页
css媒体查询.docx_第2页
第2页 / 共15页
css媒体查询.docx_第3页
第3页 / 共15页
css媒体查询.docx_第4页
第4页 / 共15页
css媒体查询.docx_第5页
第5页 / 共15页
点击查看更多>>
下载资源
资源描述

css媒体查询.docx

《css媒体查询.docx》由会员分享,可在线阅读,更多相关《css媒体查询.docx(15页珍藏版)》请在冰豆网上搜索。

css媒体查询.docx

css媒体查询

1输出可见区域高度与宽度的比例

DOCTYPEhtml>

mediafeaturesaspect-ratio

--

时间:

2016-07-15

描述:

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

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

语法:

aspect-ratio:

取值:

指定比率

-->

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

11时,本行文字显示为红色

2输出彩色原件个数

DOCTYPEhtml>

mediafeaturescolor

--

描述:

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

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

与色彩color不同,媒体特性color的取值只能是,用来表示色彩数。

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

语法:

color:

取值:

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

不允许负值

-->

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

3彩色表中条目数

DOCTYPEhtml>

color-indexofmediafeatures

--

描述:

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

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

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

语法:

color-index:

取值:

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

不允许负值

-->

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

4定义屏幕输出

DOCTYPEhtml>

mediafeaturesdevice-aspect-ratio

--

描述:

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

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

4/3,16/9,16/10

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

语法:

device-aspect-ratio:

取值:

指定比率

-->

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

10时,本行文字显示为红色

4定义屏幕可见高度

DOCTYPEhtml>

mediafeaturesdevice-height

--

描述:

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

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

语法:

device-height:

取值:

用长度值来定义高度。

不允许负值

-->

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

5定义屏幕可见宽度

DOCTYPEhtml>

mediafeaturesdevice-width

--

描述:

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

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

语法:

device-width:

取值:

用长度值来定义宽度。

不允许负值

-->

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

6查询输出点阵

DOCTYPEhtml>

gridofmediafeatures

--

描述:

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

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

语法:

grid:

取值:

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

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

-->

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

7定义页面可见高度宽度

DOCTYPEhtml>

mediafeaturesheight

--

描述:

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

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

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

语法:

height:

取值:

用长度值来定义高度。

不允许负值

-->

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

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

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

DOCTYPEhtml>

monochromeofmediafeatures

--

描述:

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

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

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

语法:

monochrome:

取值:

用整数值来定义宽度。

不允许负值

-->

当你的输出设备是单色的(黑白色),本行文字显示为红色

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

DOCTYPEhtml>

mediafeaturesorientation

--

描述:

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

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

语法:

orientation:

portrait|landscape

取值:

portrait:

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

landscape:

除portrait值情况外,都是landscape

-->

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

10定义设备分辨率

DOCTYPEhtml>

resolutionofmediafeatures

--

描述:

定义设备的分辨率。

如:

96dpi,300dpi,118dpcm

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

语法:

resolution:

取值:

用整数值来定义宽度。

不允许负值

-->

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

11定义电视类扫描工序

DOCTYPEhtml>

scanofmediafeatures

--

描述:

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

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

语法:

scan:

progressive|interlace

取值:

progressive:

连续扫描

interlace:

交织扫描

-->

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

12定义可见宽度区域

DOCTYPEhtml>

mediafeatureswidth

--

描述:

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

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

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

语法:

width:

取值:

用长度值来定义宽度。

不允许负值

-->

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

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

 

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 解决方案 > 学习计划

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1