viewport:视口，设备屏幕上能用来显示网页的区域；
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width ：设置layout viewport的宽度，为正整数，或字符串"device-width",设备宽度的含义
initial-scale=1.0 ：设置页面的初始缩放值，
maximum-scale=1.0 ：设置最大缩放值
minimum-scale=1.0 ：设置最小缩放值
@media:媒体查询,针对不同的屏幕设置不同的样式
@media mediaType and/not/or/only (条件) { css样式 }
注意： 条件中可以使用过rem和em，不过无论html设置的font-szie是多少，rem都是根据默认值16px计算的
mediaType ：screen计算机屏幕(默认)； print打印预览模式； all适用于所有设备
and且 not条件取反 or或者 only仅仅
<!-- [if lte IE 8]>... <!-- [endif]> :根据不同的IE版本显示不同的HTML和CSS文件
因为ie8及一下不支持@media,所以需要作出提示
注意：空格和符号不能缺少
px、em、rem是CSS中的度量单位
1px相当于1个像素，在实现响应式页面时，应用相对长度单位em和rem;
em相对参照物为父元素的font-size,具有继承的特点，会一层一层向上找，知道找到font-size,如果没有设置font-size,浏览器会默认一个em设置：1em = 16px; em缺点：容易混乱，不能乱设置font-size,一切都以一个font-size大小来设置
rem就是相对参照物为根元素html，相对参照物不会改变，ie8及一下不支持，所以比较好计算，如果没有设置，默认1rem = 16px;
系统默认情况下font-size=16px; 所以给html设置font-size:62.5%时，1rem = 10px; (10/16*100%);
图片的自适应,使用picture可能不兼容，引用picturefill.js来处理不兼容情况，直接引入就OK
<picture>
<source srcset="img/ad001-l.png" media="(min-width: 50em)"> //最小宽度为800px触发
<source srcset="img/ad001-m.png" media="(min-width: 30em)"> //最小宽度为480[x触发
<img src="img/ad001.png"> //小于480px触发
</picture>
手机端背景图的自适应2x和3x屏幕
bg-image($url)
background-image: url($url+‘@2x.png‘)
@media (-webkit-min-devicec-pixel-ratio:3),(min-devicec-pixel-ratio:3) //最小dpi为3时，同3X图片
background-image: url($url+‘@3x.png‘)
响应式开发
原文：https://www.cnblogs.com/fanbulaile/p/11129906.html
