小编给大家分享一下css3中媒体查询的语法简介,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!媒体查询的语法组成是“@media not|only mediatype and (expressions) {CSS代码...;
小编给大家分享一下css3中媒体查询的语法简介,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
媒体查询的语法组成是“@media not|only mediatype and (expressions) {CSS代码...;}”;媒体查询可由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回true或false。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。
媒体查询可用于检测很多事情,例如:
viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机的横屏,竖屏)
分辨率
目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。
查询语法
@media not|only mediatype and (expressions) { CSS 代码...; }
多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。
媒体类型
如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。
除非使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。
值 | 描述 |
---|---|
all | 用于所有媒体设备 |
用于打印机 | |
screen | 用于电脑屏幕,平板,智能手机等 |
speech | 用于屏幕阅读器 |
媒体功能
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
height | 定义输出设备中的页面可见区域高度。 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-color | 定义输出设备每一组彩色原件的最大个数。 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-resolution | 定义设备的最大分辨率。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
resolution | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
width | 定义输出设备中的页面可见区域宽度。 |
举个例子
屏幕宽度大于480px,字体的大小设置为16px。
@media screen and (min-width: 480px) { body { font-size:16px; }}
看完了这篇文章,相信你对“css3中媒体查询的语法简介”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网精选频道,感谢各位的阅读!
--结束END--
本文标题: css3中媒体查询的语法简介
本文链接: https://www.lsjlt.com/news/270042.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0