移动端适配的三种方法

根据750的设计稿为例
方法一：引入rem.js文件，具体的文件代码可参考：

(function (doc, win) {
var docEl = doc.documentElement,
// orientationchange 当设备的方向变化（设备横向持或纵向）此事件被触发
//判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
//clientWidth:对象内容的可视区的宽度,不包滚动条等边线
if (!clientWidth) return;
//把document的fontSize大小设置成跟窗口成一定比例的大小
if(clientWidth>=750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};

if (!doc.addEventListener) return; //DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

方法二：js+less适配
rem.js:

(function (win) {
function setUnitA() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + "px";
}
var h = null;
window.addEventListener("resize", function () { clearTimeout(h); h = setTimeout(setUnitA, 300); }, false);
setUnitA();
})(window);

**common.less：**文件顶部定义@rem: 750/10rem，然后css全文件的单位直接用@rem。如：100px = 100/@rem
初始化style：

<style>
      /* 如果屏幕超过了750px，那么我们就就按照750px设计稿来走，不会让页面超过750px ,使用媒体查询来设置*/
      @media screen and (min-width: 750px) {
        html {
          font-size: 75px !important;
        }
      }
      body {
        min-width: 320px;
        max-width: 750px;
        width: 10rem;
        margin: 0 auto;
      }
    </style>

方案三：less适配。

html {
font-size: 20px;
}
@media only screen and (min-width: 401px) {
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px) {
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px) {
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px) {
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px) {
html {
font-size: 40px !important;
}
}
@rem: 40rem;