使用CSS3的@media来编写响应式的页面

首先要知道，咱们为何要写自适应的页面（响应式页面）

【直接看干货】

众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，可是若是放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？之前，能够再专门为手机定制一个页面，当用户访问的时候，判断设备是手机仍是电脑，若是是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m.baidu.com，这样作简直就是费力不讨好的活，因此聪明的程序员开发了一种自适应写法，即一次开发，到处显示！这究竟是一个什么样的神器东西呢，接下来就揭晓它的神秘面纱。

CSS3 的 @media 查询

定义和使用

使用 @media 查询，你能够针对不一样的屏幕大小定义不一样的样式。 @media 能够针对不一样的屏幕尺寸设置不一样的样式，特别是若是你须要设置设计响应式的页面，@media 是很是有用的。 当你重置浏览器大小的过程当中，页面也会根据浏览器的宽度和高度从新渲染页面，这对调试来讲是一个极大的便利。

CSS 语法

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒体类型（mediaType ）

类型有不少，在这里不一一列出来了，只列出了经常使用的几个。

值	描述
all	用于全部设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。（最经常使用）
speech	应用于屏幕阅读器等发声设备

媒体功能（media feature）

媒体功能也有不少，如下列出经常使用的几个

值	描述
max-width	定义输出设备中的页面最大可见区域宽度
min-width	定义输出设备中的页面最小可见区域宽度

开始编写响应式页面

编写以前呢，有几个要准备的工做

准备工做1：设置Meta标签

首先咱们在使用 @media 的时候须要先设置下面这段代码，来兼容移动设备的展现效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

这段代码的几个参数解释：

• width = device-width：宽度等于当前设备的宽度
• initial-scale：初始的缩放比例（默认设置为1.0，即表明不缩放）
• user-scalable：用户是否能够手动缩放（默认设置为no，由于咱们不但愿用户放大缩小页面）

其余还有不少参数呢，想要了解的童鞋能够直接去百度

准备工做2：加载兼容文件JS

由于IE8既不支持HTML5也不支持CSS3 @media ，因此咱们须要加载两个JS文件，来保证咱们的代码实现兼容效果：

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

准备工做3：设置IE渲染方式默认为最高(可选)

如今有不少人的IE浏览器都升级到IE9以上了，因此这个时候就有又不少诡异的事情发生了，例如如今是IE9的浏览器，可是浏览器的文档模式倒是IE8 为了防止这种状况，咱们须要下面这段代码来让IE的文档渲染模式永远都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

这段代码后面加了一个chrome=1，若是用户的电脑里安装了 chrome，就可让电脑里面的IE不论是哪一个版本的均可以使用Webkit引擎及V8引擎进行排版及运算，若是没有安装，就显示IE最新的渲染模式。

代码实例

一、若是文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

从上面的代码能够看出，媒体类型是 屏幕（screen），使用 一个 and 链接后面的媒体功能，这里写的是 max-width:300px ，也就是说，当屏幕的 最大宽度 小于等于 300px 的时候，就应用花括号里面的样式。

 

二、当文档宽度大于等于300px 的时候显示的样式

@media screen and (min-width: 300px){
    body {
        background-color:lightblue;
    }
}

注意，这里的媒体功能使用的是 min-width 而不是 max-width，我已经标红高亮显示出来了。

 

三、当文档宽度大于等于 300px 而且小于等于500px （ width >=300 && width <=500）的时候显示的样式

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代码 */
}

注意，这里使用了两个 and ，用来链接 两个媒体功能，一个用于限制最小，一个用于限制最大。

---

※ 须要注意的地方（划重点）

一、经过灵活应用以上技巧，开发出一个响应式页面，还不是近在咫尺的感受_(:з」∠)_

二、不要被 min-width 和 max-width 所迷惑，初学者很容易误觉得 min-width 的意思是小于xxx的时候才应用，然而这就陷入误区了，其实它的意思是：当设置了 min-width 的时候，文档的宽度若是小于设置的值，就不会应用这个区块里的CSS样式，因此 min-width 它才能实现大于等于设置的值得时候，才会应用区块里的CSS样式，max-width 也是如此。

三、或者这样想一想，先看代码，这句代码的意思是宽度大于等于 300px ，小于等于 500px （ width >=300 && width <=500）的时候应用样式

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代码 */
}

min-width:300px 的做用是当文档宽度不小于 300px 的时候就应用 {} 里的CSS代码块，即大于等于 300px，max-width:500px 的做用是当文档宽度不大于 500px 的时候就应用{} 里的CSS代码块，即小于等于 500px 是否是这样想就容易明白了些呢？

四、这里有个弯很难绕过来，本身多动手作作实验，多动脑想一想，就豁然开朗了。