CSS媒体查询

CSS媒体查询

@media语法：

@media[mediatype][and|not|only]([mediafeature]){
/*css code*/
}

常用mediatype

all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕、平板、智能手机等

常用mediafeature
max-width 输出设备中页面最大可视区域宽度 小于这个width时，其中的css起作用
max-height 输出设备中页面最大可视区域高度 小于这个height时，其中的css起作用
min-width 输出设备中页面最小可视区域宽度 大于这个width时，其中的css起作用
min-height 输出设备中页面最小可视区域高度 大于这个height时，其中的css起作用
-webkit-min-device-pixel-ratio 设备上最小的物理像素和设备独立像素比，简称设备像素比（DPR ）

媒体查询包含了一个媒体类型和至少一个使用如高度、宽度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围，包含了一个媒体类型和如css3规范中描述的包含了一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真，并且媒体查询中的所有表达式为真。

例子：

<!--link元素中的css媒体查询-->

<link rel="stylesheet" media="(max-width:800px)" href="example.css"/>

<!--样式表中的css媒体查询-->

<style>

@media (max-width:600px){

.facet_sidebar{

      display:none;

          }

     }

</style>

当媒体查询是真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回是假，标签上带有媒体查询的样式表仍将被下载，只是不会被应用。

在不使用not或only操作符的情况下，媒体类型是可选的，默认是all.