CSS3 之 Media（媒体查询器）

1.响应式Media（媒体查询器）

（1）<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css” /> 当页面宽度小于或等于600px,调用small.css　　　

转换成css3中的写法为：

@media screen and (max-width: 600px) {

选择器 {

属性：属性值；

}

}

就是将small.css文件的内容放在@media 里

（2）<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  /> 当页面宽度大于等于900px,调用big.css

@media sreen and (min-width: 900px) {

….

}

(3)多个Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

@media  (min-width:600px) and (max-width:900px) {

…

}

css3中Media标签的语法：

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

MediaType: （常用）

all : 用于所有设备

Print：用于打印机和打印预览

screen: 用于电脑屏幕，平板电脑，智能手机 （最常用）

speech: 应用于屏幕阅读器等发声设备

Media feature：（常用）

max-width: 定义输出设备中页面最大可见区域宽度

min-width: 定义设备中页面最小可见区域宽度

正式在项目中使用Media

在写media之前，首先设置好<meta>标签

（1）<meta name=“viewport” content=“width=device-width,initial-scale=1.0,user-scalable=no”  />

width=device-width : 宽度等于当前设备的宽度

Initial-scale: 初始的缩放比例 （默认1.0，不缩放）

User-scalable: 用户是否可以手动缩放

（2）因为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浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8 为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的

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

chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。

然后在项目中使用

$mobileWidth: calc(100% - 40px);  //手机屏幕两边各有20px的空白

@media

only screen and (max-width: $mobileWidth),

only screen and (max-device-width: 720px) {

｝

注意下写的这个顺序，以免被覆盖样式：

用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

H5小组合伙研究者咱们出一个新属性吧让他的width:100%;变得更强大，哥几个一拍巴掌合计着成就这样flex(伸缩盒)也横空出世了.

Flex:

设置父元素为display:flex;如果想设置元素的排列方向呢是自上而下还是自下而上呢是从左到右呢还是从右至左呢只需要设置属性flex-direction:row|column;flex-flow: flex-direction flex-wrap|initial|inherit;