自适应需要从以下几个方面入手：
布局、字体、retina带来的问题
一、布局：
1. 用%做单位
老方案，兼容性高
在制作落地页的时候，一般会有一屏展示的需求，就是不需要滚动就展示全部内容，我的解决方案是通过
html,body{height:100%} /*设置body高度为屏幕高度*/
.section-header{height:30%}
.section-content{height:60%}
.section-footer{height:10%}
2. 用flex方案 （推荐）
这里有兼容第一版本和第三版本flex的库 https://github.com/lzxb/flex.css
比%精准，而且灵活
3. 用rem做单位（不推荐）
需要设置基准font-size，见下面自适应字体的解决方案
二、字体
1. 使用rem，设置基准font-size (有的说法说rem有问题)
可以设置动态基准font-size = clientWidth / 10，将clientWidth平均划成10份，模拟vw作为单位，弥补vw的兼容性
2. 根据dpr动态生成
用js判断出dpr之后，设置body的属性dpr，根据不同的dpr来设置不同的字体大小
3. 根据设计稿的尺寸
可以根据设计稿来设置基准clientWidth / designWidth * designFontSize，然后使用css编译工具来编译。
tips：
方案1和方案2可以用postcss的px2rem一起实现
三、retina屏幕
当dpr为2的时候，一个抽象像素要用到122个物理像素来显示；当dpr为3的时候，一个抽象像素要用到133个物理像素来显示。
retina屏带来的问题：
① 图片高清问题
当一张位图的1个抽象像素用4个物理像素（dpr=2）展示的时候，每个物理像素需要取该颜色和亮度的近似值，所以会产生模糊的问题；相反，一张位图的4个抽象像素用1个物理像素展示的时候，图像显示的锐度会降低（downsampling）。
解决方案：
1. 动态viewport （只解决了blur的问题，而downsampling我觉得这个肯定会有吧？）
根据设备的dpr用图片服务器生成1x、2x、3x的图片
2. 阿里lib.img
https://github.com/amfe/article/issues/8
问题延伸：icon的高清问题以及解决方案
https://github.com/amfe/article/issues/2
② 1px问题
设置1px的时候，用了4个物理像素（dpr=2）展示，会显得比较粗
解决方案：
1. 见动态viewport
2. 设置transform scale
transform:scaleX(0.5);
transform:scaleY(0.5);
总结：
淘宝方案lib-flexible使用了使用了动态viewport、rem布局、根据dpr动态生成字体大小（自行postcss）
可以参考以下文章：
https://github.com/amfe/lib-flexible
http://div.io/topic/1092
https://github.com/amfe/article/issues/17
http://huodong.m.taobao.com/act/yibo.html
其实有时候如果对1px和高清图片要求不是很高，只需要考虑设置scale为1，然后选用flex，动态设置font-size即可
参考：http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/
相关基础知识：
-
retina相关
http://www.w3cplus.com/css/viewports.html
https://github.com/riskers/blog/issues/17
①设备像素比(device pixel ratio ) = 物理像素(physical pixel) / 设备独立像素(density-independent pixel)
②pc的viewport大小恒等于浏览器窗口的大小
③移动端的viewport分为layoutviewport和visualviewport，viewport的本质是html元素的wrapper，它限制了html的宽度。但是viewport不在HTML范畴内，所以不可以通过html的css来设置viewport的宽度。layoutviewportde的默认值一般在 768px ~ 1024px 之间，最常见的宽度是 980px。而visualviewport是控制meta viewport的scale程度的
④如果设置的meta viewport width="device-width"，layoutviewport的宽度就会变为对应的物理大小（注意不是物理像素），这样就是理想视口，用户一加载进来的时候不用缩放来浏览。
⑤设置了initial-scale=1，就会触发width="device-width"
⑥meta viewport的width的值是dip，就算它的值为“device-width” -
加载相关
①onload和onpageshow的区别：当页面是从缓存中读取的，onload就不执行，而onpageshow仍然执行;
②document.readyState有三种状态：loading、interactive、complete
③domcontentloaded、onload的区别
网友评论