00一、媒体查询 @media

一、媒体查询介绍

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

CSS 语法

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

媒体类型（mediaType ）

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

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

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

准备工做1：设置Meta标签

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

<meta name="viewport" content="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最新的渲染模式。

代码实例

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

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

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

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

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

三、经常使用的尺寸

设置的常有：

@media screen and (min-width:1200px)

@media screen and (min-width:992px)

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

@media screen and (min-width:480px)

在设置时，须要注意前后顺序，否则后面的会覆盖前面的样式。

    从最佳用户体验来看，材料化设计用户界面应该适应以下布局尺寸：480、600、840、960、1280、1440和1600dp（设备独立像素）：

分界点(dp)	手机/平板电脑竖屏	手机/平板电脑横屏	屏幕	列数	间隔宽度(dp)
0	small handset		超小	4	16
360	medium handset		超小	4	16
400	large handset		超小	4	16
480	large handset	small handset	超小	4	16
600	small tablet	medium handset	小	8	16/24*
720	large tablet	large handset	小	8	16/24*
840	large tablet	large handset	小	12	16/24*
960		small tablet	小	12	24
1024**		large tablet	中等	12	24
1280**		large tablet	中等	12	24
1440**			大	12	24
1600**			大	12	24
1920**			超大	12	24

注：上述表格中，*号表示当设备最小宽度小于600时取值16dp。**表示在桌面系统中分界点要比所列值小16dp以适应Chrome浏览器的变化。