CSS3 媒体查询与响应式网页

在学习Bootstrap的时候，已经了解了响应式网页的概念。现在移动互联网的兴起，让Bootstrap都以移动开发作为优先，Bootstrap3用浮动做出了响应式布局，Bootstrap4更是用CSS3的弹性盒子进行了响应式布局。现在通过CSS来了解一下媒体查询特性和响应式布局的特点。

媒体查询

CSS2中已经有媒体类型的概念，但是当时移动互联网还未兴起，CSS2的媒体只有all, screen, print三种。W3C还有一些其他类型的媒体，但是都不常用。

到了移动互联网的时代，Web前端开发面临着重要的革新，就是适配手机屏幕，很多网页原来是横向为主，现在需要在竖向上进行调整，还要面临屏幕像素与分辨率改变带来的浏览问题。

CSS3增强了媒体查询的方式，从原来的查询媒体的种类（比如电视机，显示器，打印机）等又引入了直接查询媒体显示分辨率的方法。

常见的媒体查询方法主要有：

• link  通过link标签里的media属性引入，是CSS2中的内容，已经很少用到了
• xml  用于XML文件的规定，HTML中不用该方式。也是CSS2的内容。
• @import  写在style标签内 @import url("URL)的方法引入文件。也是CSS2的内容
• @media  CSS3新增的方式，其后可以跟具体的选择器和样式，非常灵活。

可以把@media认为是一种带逻辑的CSS样式，即：媒体处于某种状态，就设置对应的样式。

先通过一个简单的例子看一下@media的使用方法。

@media screen and (max-width: 768px) {
    div.w {
        margin: 0 auto;
        height: 100px;
        width: 60%;
        box-sizing: border-box;
        border:1px solid red;
        border-radius: 5px;
    }
}

@media screen and (min-width: 769px) {
    div.w {
        margin: 0 auto;
        height: 100px;
        width: 768px;
        box-sizing: border-box;
        border:1px solid red;
        border-radius: 5px;
    }
}

<div class="w"></div>

媒体查询的写法就是：@media 媒体类型 and (媒体属性判断) {自定义样式}

这个效果就是，当屏幕宽度小于等于768像素的时候，div的宽度是页面的60%，大于等于769像素的时候，div的宽度固定768像素不变。可以看到，@media就像一个if判断一样，只在满足条件的时候生效，不满足条件的时候就不生效。

所以@media的核心就是括号里的判断条件，看一下判断条件与逻辑运算符。

判断条件

媒体查询的逻辑判断符号采用的是min- 或者 max- 加在表格里可以使用这两个前缀的属性之前，表示小于等于或者大于等于。像一个属性一样给这个属性赋值，就是一个判断条件。

不加min-和max-，就表示相等判断。

对于一些常用属性的解说：

• device-height  这个指设备的物理屏幕高度，如果针对手机适配，会用到该属性。根据手机的屏幕大小设置实际视口。
• device-width  这个指设备的物理屏幕宽度。
• height  这个是指浏览器实际渲染的页面大小，会随着浏览器的窗口变化而变化，这个就是页面的实际大小，非常常用。
• width  响应式网页用的最多的就是宽度变化，这个属性也非常重要。
• orientation  主要用于移动端，检测屏幕横过来和竖过来，这个时候height和width都会改变，再设置样式。

逻辑运算符

既然是逻辑运算，除了前边的类似if的判断条件之外，还有逻辑运算符用于表示与，或和非。

与

media还可以将多个条件通过and来表示同时满足，各个条件之间是并集，即同时满足才可以。比如一个简单的例子：

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

这个意思就是屏幕宽度在600-900像素之间背景为黄色，小于600和大于900都没有效果。

非

此外还有 not 关键字，用于对条件取反，写在@media之后。上边的例子改成：

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

这时候屏幕就会在小于600和大于900像素的时候变成黄色。

或

如果多个条件是或逻辑，满足任一就应用样式，可以用逗号隔开各个表达式。

@media screen and (min-width: 600px) and (max-width: 700px), (min-width: 801px) and (max-width: 900px) {
    body {
        background-color: yellow;
    }
}

屏幕在600-700和801-900像素的时候背景变成黄色，其他条件不变色。

响应式网页布局 Responsive Web Design

随着移动互联网发展以及高分辨率屏幕的出现，用户访问Web的设备种类，分辨率等都非常多样化，一位叫Ethan Marcotte的平面和网页设计师于2010年发表了一篇名为 Responsive Web Design 的文章提出了响应式网页布局的概念和思路。之后随着移动互联网的兴起，现在几乎所有的大型网站都采用了响应式网页技术，以在不同的设备之间都达到想要的布局效果。这里有一个例子可以迅速了解各种布局的区别。

响应式网页布局是一种思路，Ethan Marcotte提出来响应式网页的条件：

• 网站建立灵活的网格基础的布局
• 引用到网站的图片可伸缩
• 通过媒体查询设置不同的样式

响应式网页布局中有一系列术语：

• 流体网格布局：网格采用百分比控制，参考了原来的流体网格布局
• 弹性图片：一般就用 img {width:100%} 来进行控制，必要的情况下，还可以准备多张图片，在断点的时候通过@media修改图片。下边有一个例子。
• 媒体查询，所有的响应式网页都采用了CSS3的@media进行媒体查询。
• 屏幕分辨率，由于小尺寸高分辨率设备和普通大尺寸显示器很不同，所以很多时候需要查询分辨率以及PPI来确定显示效果。
• 设置断点，在之前的例子里就演示过断点，一般可以针对屏幕设置一些主要的断点，然后再设置一个高于1024像素的桌面断点。

响应式网页的布局技巧：

• 减少使用无关的DIV，使用HTML5语义DIV
• 不要使用内联元素
• 少用JS和Flash
• 少用绝对定位和浮动
• 不要使用100%的长度设置
• 注意在开始布局前要重置好样式，比如使用normallize这个重置样式
• 给重要的网页元素用一些适合响应式布局的技巧比如下拉菜单等。

设计一个网页的时候，先布局，不用设置具体样式，然后在浏览器的开发工具中测试各种分辨率的屏幕，如果都OK，再进行下一步工作。

META标签

在响应式布局里边有一个很重要的标签就是META，专门是为了对付移动端。由于移动浏览器很多时候采用了比实际屏幕大很多的虚拟可视区域，这样才能让网页版心内容在竖向的手机上接近满屏显示而且不会变形。结果导致CSS3 @media在移动浏览器上失效。这个时候就需要在META标签中进行一些设置。

META标签写在HEAD标签内，写法是：<meta name="viewport" content="" >，关键是content其中的属性与对应的值：

在很多前端UI框架中，在基础设置中都会有这么一条适配手机浏览器的标准写法：

<meta name="viewport" content="width=device-width, initial-scale=1">

响应式网页布局UI开源框架

每一次布局网页，如果从头写起各种适配，会很麻烦。为了方便快捷的开发Web页面，有一系列开源框架可供选择。

比较知名和易用的就是Bootstrap，此外这里还列出了一系列知名的前端框架。

到目前，除了伸缩盒子之外，CSS3的主要内容都已经学习完毕，总的来说，CSS3的内容并不算多，但是技巧程度更上一层楼。伸缩盒子比较复杂，待之后有空来补。Bootstrap4的响应式布局实现，就基于伸缩盒子。