CSS媒体查询

最新推荐文章于 2024-05-22 12:05:09 发布

冯晓如

最新推荐文章于 2024-05-22 12:05:09 发布

阅读量829

点赞数

分类专栏： Web前端文章标签：媒体查询

本文链接：https://blog.csdn.net/honeygirl_/article/details/102923119

版权

本文详细介绍了CSS媒体查询的使用，包括@media语法、逻辑操作符、逗号分隔列表和媒体属性。媒体查询允许开发者根据设备特性如屏幕尺寸、设备像素比等应用不同的样式，支持and、not和only操作符进行条件组合。例如，可以设置在横屏且宽度不小于768像素的设备上应用特定样式。此外，还提及了Mozilla的一些专有媒体属性。

摘要由CSDN通过智能技术生成

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.