【移动端】移动端页面适配方案

前言

以下文章是在设计稿尺寸为750 * 1340的基础上展开讨论的，如需参考，须根据实际尺寸作出相应更改。

一、使用rem适配的方案

（一）什么是rem

这是MDN上的解释：

这个单位代表根元素的 font-size 大小（例如 元素的font-size）。当用在根元素的font-size上面时 ，它代表了它的初始值

也就是说，rem单位取值的大小和根元素html的font-size取值直接相关。它跟html元素之间得关系为：html的fontsize值 * rem值 = px值。所以，我们可以根据不同的设备宽度来调整html的font-size值，以适应不同的设备。

（二）动态获取并修改html的font-zise

在页面头部引入以下这段代码（代码参考自https://segmentfault.com/a/1190000012225828）：

(function(doc, win) {
   var docEl = doc.documentElement,
       isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
       dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
       dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
       dpr = 1,
       scale = 1 / dpr,
       resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
   docEl.dataset.dpr = dpr;
   var metaEl = doc.createElement('meta');
   metaEl.name = 'viewport';
   metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
   docEl.firstElementChild.appendChild(metaEl);
   var recalc = function() {
       var width = docEl.clientWidth;
       if (width / dpr > 750) {
           width = 750 * dpr;
       }
       // 乘以100，px : rem = 100 : 1
       docEl.style.fontSize = 100 * (width / 750) + 'px';
   };
   recalc()
   if (!doc.addEventListener) return;
   win.addEventListener(resizeEvt, recalc, false);
})(document, window);

以此达到根据屏幕尺寸动态更改html的font-size的目的，并将px与rem设置成100：1的比例，即100px等于1rem。

（三）使用

当你的页面引入了以上代码后，若设置一个宽为200px，高为100px的元素时，只需将它转成响应的以rem为单位的值：

#test {
	width: 2rem;
	height: 1rem;
}

前面我们将px与rem的比例设置成100：1，因此我们可以很方便地将px值转成rem值。

二、使用vw+rem适配的方案

（一）什么是vw

vw即视口的宽度，即显示网页的区域大小。

（二）使用步骤

1）设置meta标签

<meta name = 'viewport' content = 'width = device-width,initial-scale = 1,minimum-scale = 1, maximum-scale = 1, user-scalable = no'/>

2）设置html的font-size值

设置html的font-size值为：

html{
    font-size: 13.333vw;
}

原因如下：
由于1vw = 视口的1%，而视口宽度为750px（已假定设计稿为750），即750px = 100vw，所以1px = 0.13vw。

又因为px值/rem值=html的font-size值，所以设置html的font-size为13.33vw，相当于设置px:rem=100:1，便于计算。

3）使用

当你做了以上设置后，若设置一个宽为200px，高为100px的元素时，只需将它转成响应的以rem为单位的值：

#test {
	width: 2rem;
	height: 1rem;
}

前面我们将px与rem的比例设置成100：1，因此我们可以很方便地将px值转成rem值。

总结

vw的浏览器兼容性越来越好，使用vw+rem来做移动端适配是挺不错的一个方案。