rem布局

用js获取视窗宽度,然后设置html的font-size为视窗宽度的十分之一，而rem表示相对于根元素的html的大小，所以1rem即表示视窗宽度的十分之一。这样通过rem于html的font-size的关系，间接实现了一个相对于视窗宽度的百分比。

vm布局

这是一个新的布局单位，目前android4.4以上支持，总共有四个vm，vh，vmin，vmax,分别表示视窗宽度，视窗高度，视窗宽高中的最小值，视窗宽高中的最大值。
1vw表示百分之一的视窗宽度。

flex布局

类似于百分比布局，无需计算百分比，可以很好的适配所有屏幕
手机天猫 典型的flex布局，flex做了很好的兼容处理，高度写死，可查看顶部搜索栏源码
缺点：

• 有着和百分比布局一样的缺点，高度不便调整
• 有几种不同的flex标准，在低端ios和安卓中有着各种各样的兼容性问题

百分比布局

使用子元素在父元素下的百分比为单位，使用子元素在不同屏幕宽度下宽度表现一致
利用img标签的特性，只设宽度等图片加载完，这种方法会导致大量的重排，并且非固定高度会导致懒加载等功能难以实现
缺点：

• 宽度可以随屏幕适应，但高度不能，宽屏下会被拉伸，具体表现为，iphone 4中看到的是正方形，而到了iphone 6s中看到的是长方形
• 需要手动计算子元素在父元素下的百分比，计算麻烦
• 百分比的大小往往需要精确到小数位6到8位

字体适配

适配规则
段落文字在大屏上希望能看到更多文字，标题文字或字数固定的文字应该应用缩放原则，随屏幕变大而变化
视口不缩放
通过媒体查询去设置不同范围内的大小
视口缩放
根据不同的dpr值去设置相应字体大小
标题文字或长度固定的文字可以使用rem单位去做适配

图片高清

视口不缩放：使用@2x两倍图
视口缩放：根据不同的dpr，加载不同尺寸的图片（图片处理服务器）