css中媒体查询有哪些？怎么运用？
媒体查询有哪些？有什么用？
媒体查询限定CSS样式的范畴，以便仅在知足某些媒体前提时才适用。
简略来说：媒体查询可以让我们依据设施显示器的特性（如视口宽度、屏幕比例、设施标的目的：横向或纵向）为其设置CSS样式。
媒体查询可用于检测的媒体特性，比方： width 、 height 和 color （等）。运用媒体查询，可以在不转变页面内容的状况下，为特定的一些输出设施定制显示结果。【相干视频教程举荐：css3教程】
媒体查询是怎么运用的？
我们可以将媒体查询视为阅读器的if-else语句来解释，媒体查询是评估为真或假的逻辑表达式。媒体查询包含可选的媒体类型、零个或多个媒体特性以及允许结构更复杂表达式的逻辑关键字。
1、根本语法：
@media [not | only][and] ( );
注明：
media-type（媒体类型）
媒体类型是可以显示HTML文档的宽泛种别的会员代理设施。媒体类型列表已在媒体查询级别4标准中进行了修订。已弃用的媒体类型被辨认为有效，但不会与任何设施匹配，即您的媒体查询仍将适用，但在所有设施上都利用，就像没有指定媒体类型同样。
可以设定以列的媒体类型：
all：匹配所有设施。
print：匹配打印机和用于再出打印显示的设施，例如在“预览”中显示文档的Web阅读器。
screen：匹配所有与打印或语音不匹配的设施。
speech：匹配屏幕浏览器和“读出”页面的相似设施。
media-condition（媒体功能）
媒体功能比媒体类型更精细，由于它针对相干设施设定单个特定功能。媒体功能的语法与CSS属性雷同，包含功能名称，冒号和要测试的值都雷同。
媒体功能列表也已从介质查询级别3更改为介质查询级别4；已弃用的功能已保存在标准中以便向后兼容，但强调它们不得用于新样式表。会员代理仍将按指定继续支撑它们。
可以设定以列的媒体功能：
屏幕/设施的尺寸：
width
height
aspect-ratio
orientation
显示质量：
resolution
scan
grid
update
overflow-block
overflow-inline
色彩：
color
color-index
monochrome
color-gamut
彼此作用：
pointer
hover
any-pointer 和 any-hover
足本：
scripting：
2、媒体查询的运用示例：
实现CSS相应式媒体查询
例:
@media screen and (max-width:720px) and (min-width:320px){
body{
background-color:red;
}
@media screen and (max-width:320px){
body{
background-color:blue;
}
}注明：
该段媒体查询的意思是：当设施屏幕宽度在320px~~720px之间时，媒体查询设定body的配景色（background-color:red;）会重叠以前的body配景色；当设施屏幕宽度在320px下列时，媒体查询可以设定body的配景色（background-color:blue;），一样会重叠以前的body配景色。
css @media查询的阅读器支撑
基于媒体信息利用样式的办法，包含页面和设施尺寸等内容。
可以支撑下列版本：
总结：以上就是本篇文的全部内容，但愿能对大家的学习有所帮忙。
以上就是css中媒体查询有哪些？怎么运用？的细致内容，更多请关注 百分百源码网 其它相干文章！
