媒体查询

媒体查询是CSS3添加的新功能。在移动端适配开发中发挥着强大的作用。接下介绍一下媒体查询的用法。

使用

媒体查询有两种引用的方法，这里只说在样式表中的使用。

<style>
@media all and (min-width:410px){
    html, body{
        font-size: 20px;
    }
}
</style>

执行顺序

注意：如果后写的查询条件范围包括之前的某个查询条件。那么范围较小的那个会被忽略。所以要把范围小的定义写在下面。这样保证每个范围内都可以执行到。

@media only screen and (min-width: 600px) {
    div{
        background: blue;
    }   
}
@media only screen and (min-width: 400px) {
    div{
        background: yellow;
    }
}

以上这样写的话，当div宽度小于600大于400时不会显示蓝色（因为大于600的肯定也大于四百，所以min-width: 400px这个条件范围会大一些），只会一直显示黄色。直到宽度小于400时变成其原始定义的颜色。如果把两个条件换一下位置就可以都执行到了。

语法

媒体查询语法包括这样几个部分，关键字 + 应用的设备 + 判断条件 + 符合条件使用的样式。

关键字@media

不用说了，这个是必不可少的。

媒体类型

媒体类型	解释
all	所有设备
braille	盲文
embossed	盲文打印机
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网络媒体，比如电传打印机
tv	电视

我们常用的其实就是all和screen，或许还有print 。

逻辑操作符

逻辑操作符	作用
and	合并多个媒体属性
,	满足其中一个条件即可，相当于“或”
not	相当于非运算。
only	仅仅针对某种设备

以下代码只有在同时满足屏幕宽度大于300px并且是横屏模式下才能生效。

@media screen and (min-width: 300px) and (orientation: landscape){
    div{
        background: black;
    }
}

但是如果满足多个条件中的一个就生效，可以用,。下面代码如果屏幕宽度大于1000px或者是横屏模式都可以生效。

@media screen and (min-width: 1000px), (orientation: landscape){
    div{
        background: black;
    }
}

如果只是针对彩色屏幕做适配就可以使用only。

@media only screen and (min-width:xxx) and ([max-width: xxx){
    <!--只有彩色屏幕才生效。-->
}