浅谈媒体查询-CFANZ编程社区

最近用到了媒体查询，关于媒体查询做一个简单的介绍。

媒体查询主要功能是实现响应式，在特定条件下触发样式，达到响应式的效果。

使用方法

1.最小宽度

min-width表示在屏幕宽度大于等于768px时触发。

        @media screen and (min-width: 768px) {
        }

2.最大宽度

        @media screen and (max-width: 768px) {
        }

max-width表示在屏幕宽度小于等于768px时触发。

注意：@media只能使用max-width和min-width来判断，不能使用< >来进行判断。

3.多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。

当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示：

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4.设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

5.not关键字

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如

@media not print and (max-width: 1200px){样式代码}

5.only关键字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" /></pre>

另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。

到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。还有一个与众不同的是，Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。

媒体查询不生效的原因

1.and 后面一定要有空格~~~ 切记

2.meta 里面需要加上一句话：

3.代码写错了，选择器写错了，样式备覆盖了·等等低级问题，可以先在里面，写个简单的并且绝对会生效的额，先看控制台里面有没有这些media关于尺寸样式代码，如果尺寸代码有，那么，你肯定哪里写错了，细心的找找吧~~~

媒体查询权重问题

媒体查询需要计算权重，相同权重媒体查询需要放在原来的样式之后才能生效。

如果媒体查询放在css头部需要权重大于原来的样式才可以生效。

参考文章

https://blog.csdn.net/qq_33505829/article/details/81606209
https://www.jianshu.com/p/927790abdd80