移动端适配方式

适配方式

rem 适配

(function () {
    var  styleN = document.createElement("style");
    var width = document.documentElement.clientWidth/16;
    styleN.innerHTML = 'html{font-size:'+width+'px!important}';
    document.head.appendChild(styleN);
})();

优点：

1. 使用了完美视口、没有破坏。

缺点：

1. px 值转为 rem 复杂。 可以使用less转为rem。

viewport 适配

将所有设备布局适口的宽度调整为设计图的宽度

(function () {
    var targetW = 640;
    var scale = document.documentElement.clientWidth/targetW;
    var meta = document.querySelector('meta[name="viewport"]');
    meta.content = `initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`;
})()

优点：简单、所量即所得。

缺点：没有使用完美视口。

百分比。

最简单，首先方案，不用写脚本。