1.JS的根据不同屏幕宽度动态设置html的font-size，使用rem布局。

 

　　a.手淘方案 flexible+rem（参考

 

　　引入flexible.js，不需要在html结构中加入viewport标签。

 

　　flexible.js会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3；同时会给html加上对应的font-size的值，比如说75px；以及会添加viewport标签，JS会根据不同的设备添加不同的缩放比（建议内联处理，在所有资源加载之前执行这个JS）

 

　　一般用于解决 “数据大屏“ 展示的屏幕适配问题： 解决 “数据大屏“ 展示的屏幕适配问题

 

　　b.不引入第三方库，自写js动态设置html的font-size+rem

 

　　js会根据不同设备的宽度设置html的font-size，html结构需要加入

 

　　屏幕根据设计稿的比例转换对应的rem值，比如：

 

　　750的设置 = 16*（clientWidth/375）

 

　　640的设置 = 20*（clientWidth/320）

 

　　320的设置 = 10*（clientWidth/320）

 

　　2.flex布局，不使用rem，直接使用px。

 

　　html结构需要加入

 

　　例如：设计稿是750px宽度，设计稿是750px宽度（基于iphone6 375*2=750 得到的设计稿），

 

　　如果设计稿中量出某块区域的margin-top值20px，

 

　　在实际iphone6设备375px宽度中，应该除以2，所以得到值mragin-top是20/2=10px。

 

　　css代码中就是margin-top:10px。