使用vw进行移动端的适配_移动端适配的几种实现方式

rem布局

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

flex布局

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

有着和百分比布局一样的缺点，高度不便调整

有几种不同的flex标准，在低端ios和安卓中有着各种各样的兼容性问题

百分比布局

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

缺点：

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

字体适配

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

vm布局

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

现在介绍新的纯CSS的相对单位vw,vh,它们相对的是终端视口，视口(移动端你就可以当成屏幕就好啦)的宽为100vw,高为100vh。使用起来很简单，如果你需要一个宽高各为视口一半的div，只需要在css里面这样写:div {width: 50vw ;height: 50vh}，是不是很方便。但是有这么以一种情况，如果一个移动端页面某个元素按vw给宽度样式，页面随手机横屏时(vm,vh的相对值已互换)希望它的大小不变呢。你可以试试vmin,vmax。vmin代表vw与vh中较小的那一个，vmax代表vm与vh中较大的那一个。