<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）
- minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
- maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
- user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
设置IE渲染方式默认为最高
<!--[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]-->
因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果
@media screen and (max-width: 960px)
当页面小于960px的时候执行它下面的CSS
@media screen and (min-width:960px)
当屏幕宽度最小为960px（大于960px）时
@media screen and (min-width:960px) and(max-width:1200px)
当屏幕宽度介于960px和1200px之间时
媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩色屏幕
speech “听觉”类似的媒体设备
tty 不适用像素的设备
tv 电视
媒体特性
min-width：分辨率宽度大于设置值的时候识别
max-width：分辨率宽度小于设置值的时候识别
orientation：portrait ：竖屏
orientation：landscape：横屏
min-device-pixel-ratio：像素比
关键字
and 连接媒体特性
not 排除指定媒体类型
only 指定某种特定的媒体类型
