1.什么是媒体查询

媒体查询（Media queries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序时。

我们以一个网站页面为例来看下，媒体查询起到了什么作用。注意观看网页的顶部导航。

这是浏览器全屏状态下的网页。

这是浏览器窗口宽度位于767px-900px之间时的页面。

这是浏览器窗口宽度小于767px时的页面。

我们可以清楚的观察到三张图的背景以及导航栏的变化。由全屏下的多种指向式导航，到图二的展开式导航，再到图三背景图占据全屏。这都是媒体查询写出来的效果；如果没有媒体查询的参与，大概率页面会无限缩小或者字体溢出，导致整个页面就会很难看。

2.语法

这里我值列举我们最常用的一种媒体类型的写法。括号里面只能选择最大宽度或者最小宽度之一，这样一来我们只是添加了一个上限值或者下限值，如需在设置一个限制值可在括号后面写 and （min-width | max-width）以至于形成一个范围；然后我们就可以再打括号里面去编写我们需要在该宽度下的css样式。当然这只是一种媒体类型，其他设备类型只需要换掉 screen 就可以了。

@media screen and (min-width | max-width) {
  CSS-Code;
}

3.媒体类型

媒体类型（Media types）描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。

all

适用于所有设备。

print

适用于在打印预览模式下在屏幕上查看的分页材料和文档。（有关特定于这些格式的格式问题的信息，请参阅分页媒体。）

screen

主要用于各种屏幕。

speech

主要用于语音合成器。

最后附上一个学完媒体查询的一个小练（细节样式不需要注意，主要看媒体查询的效果）。注：我个人觉得这个属性最不好理解的地方应该是什么时候用min-width，什么时候用max-width。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .root{
            line-height: 40px;
            text-align: center;
            display: flex;
            background: #222;
            color: #fff;
        }
        .item{
            flex: 1;
        }
        .item:last-child{
            display: none;
        }
        .item:last-child button{
            padding: 5px;

        }
        @media screen and (min-width:500px) and (max-width:1000px) {
            .item:not(.item:first-child,.item:last-child){
                display: none;
            }
            .item:last-child{
                display: block;
            }
            .root div{
                color: brown;
            }
        }
        @media screen and (max-width:500px){
            .item:first-child{
                display: none;
            }
            .root div button{
                color: pink;
            }
        } 

    </style>
</head>
<body>

    <div class="root">
        <div class="item">Bootstrap中文网</div>
        <div class="item">Bootstrap3中文文档</div>
        <div class="item">Bootstrap4中文文档</div>
        <div class="item">Sass 教程</div>
        <div class="item">Less 教程</div>
        <div class="item">jQuery API</div>
        <div class="item">网站实例</div>
        <div class="item">
            <button>展开</button>
        </div>
    </div>
</body>
</html>

CSS样式之响应式布局（媒体查询）