移动端适配方案

版权声明：本文为博主原创文章，未经博主允许不得转载。\ https://blog.csdn.net/tang242424/article/details/82878333

1. 百分比适配。（宽度百分比，高度固定）
2. viewport适配。（将所有屏幕都设置为targetW）

(function(){
var w = window.screen.width;
var targetW = 320;
var scale = w/targetW; //当前尺寸/目标尺寸
var meta = document.createElement("meta");
meta.name = "viewport";
meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
document.head.appendChild(meta);
})();

3. rem布局

(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
html.style.fontSize = hWidth/10 + "px";
})()

数字10可自行改动。
在这里我们将屏幕分为10份，那么一份也就是1rem。那么给设计图width也除以10，如果设计图为750px；那么75就是设计图的1rem；一个div在设计图上款100px；那么它就等于100/75 rem；可以利用sass或less去计算。
这里的js还有监听窗口大小改变的事件我认为没有必要，因为一般移动设备的窗口无法改变。

psd : 750;//设计图尺寸
num : 10; // 设置根元素时的被除数
function getRem(n) {
return n / (psd / num) * 1rem;
}
p{width:getRem(100)} ==> p{width:1.33333rem}

4. flex布局
   因为js生成的根字体大小不一定为整数，所以可以设置body字体。其余字体用em单位设置。最佳： 用flex布局，rem设置宽高paddingmargin等属性，fontSize则用媒体查询来设置body的字体大小，其他用em单位来设置