媒体查询的语法组成是“@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用于所有媒体设备print用于打印机screen用于电脑屏幕，平板，智能手机等speech用于屏幕阅读器
媒体功能
aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率color定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0device-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, 118dpcmwidth定义输出设备中的页面可见区域宽度。
举个例子
屏幕宽度大于480px，字体的大小设置为16px。
@media screen and (min-width: 480px) { body { font-size:16px; }}
（学习视频分享：css视频教程）
以上就是css3中媒体查询的语法组成是什么的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1618912.html
微信扫一扫 
支付宝扫一扫 
