媒体查询 @Media

随着智能手机的普及，响应式布局的使用也是日益增长现在许多网站都在应用这项技术，也方便了我们的生活毕竟不能去哪都带着电脑吧

今天主要

媒体查询
媒体查询可以让我们根据设备显示的特征（视口宽度、屏幕比列、设备方向）来设定CSS样式，媒体查询有媒体类型和一个或多个检测媒体特征的条件表达式组成。

meta标签
在网页头部添加这一行代码

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

这几个参数的意思：
width=device-width 屏幕和设备同宽
initial-scale=1.0 初始的缩放比例
maximum-scale=1.0 允许用户缩放的最大比例（默认为1.0）
minimum-scale=1.0 允许用户缩放的最小比例（默认为1.0）
user-scalable=no 用户是否可以手动缩放（默认为no）

兼容IE
因为IE8既不支持HTML5也不支持CSS3Media，所以需要两个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]-->

使用

CSS2Media用法

<link media="screen" rel="stylesheet" href="style.css" />

media的值用来确定屏幕
再根据不同屏幕写不同的样式,大小
虽然css2可以写media为什么使用很少呢？
有几个css文件就会加载几个大大增加了http的请求，增加页面负担，对于网页很不友好

再来看看CSS3的写法

//当屏幕最小宽度为992px
@media screen and (min-width : 992px) {
    body {
        background-color: red;
    }
}
//当屏幕宽度 最小为768px 最大为991px时
@media screen and (min-width:768px) and (max-width:991px) {
    body {
        background-color: blue;
    }
}
//当屏幕最大宽度为767px
@media screen and (max-width:767px) {
    body {
        background-color: green;
        color: #00a;
    }
}

让所以样式写在一个文件这样就会避免上述问题，我们写代码既要考虑代码的简洁性也要有好的用户体验这才是我们写代码的最终目的!