如果视觉稿存在以下两种情况，需考虑使用自适应方案
-
稀疏布局 某些元素的宽/高（或者是位置）需要随着页面的宽/高改变而改变，同时元素所在的行/列并没有被占满。比如某个按钮要居中显示，宽度是页面宽度的66%。而另一种情况，一行两个课程卡片分别占50%则不属于这种情况。
-
font-size < 12px font-size小于12px的字体在3倍屏下面会显得很小，采用REM自适应方案替代media query写法。
-
在head头引入初始化js脚本
-
开发时，假如视觉稿宽度是640，则比例为640/16=40。那么，页面所有的rem数值的换算公式为：在视觉稿中的px数值/40
-
文字使用px单位，借助html元素上面的data-dpr属性写media query，只需要写3个，分别是dpr="1"，dpr="2"，dpr="3"。当视觉稿是320px的时候，度量出来的文字大小属于dpr="1"；当视觉稿是640px或者750px的时候，度量出来的文字大小属于dpr="2"；当视觉稿>1080px的时候，度量出来的文字大小属于dpr="3"。得到其中一个值，根据比例关系可换算得到另外两种情况的值，3个数值可做微调，但是文字大小最好是偶数
-
background-size的值设置为：cover
-
课程封面图片选择 在dpr=1/dpr=2中，课程封面图使用222尺寸。在dpr=3中，使用356尺寸。
-
大图（比如背景图）需要使用多倍图。直接切出来的图是dpr=3的图，其余两个可以按比例缩放，也可以dpr=1/dpr=2共用1张图片（如果不关注图片大小）。注：大图在保持清晰度的前提下可做缩放。
-
图标使用icofont，svg素材让视觉提供（请保留这些svg素材，如果后面不兼容android2.3，则可以直接使用svg图片）：
- 把字符资源当成一般的图片资源即可
- 需要共享使用外链，不需要使用内嵌
- 外链时，字符文件用gzip压缩
- 只需要trueType（.ttf）格式
-
js计算css的时候，需要完全动态计算，结果不一定需要使用rem单位，如果需要使用rem单位，则记住换算公式：1rem = W/16px
-
提供720px或者750px的视觉稿
-
视觉需要另外给出高清图
附： 本规范具体的原理，实践与讨论请移步H5自适应方案讨论贴