移动端的各种适配

        最近有点伤心，所以写几篇文章来抚慰一下自己受伤的心灵，装个逼，也许装的不成功但是至少装上了，装完就跑，想想就令人激动。

移动端的适配这是今天像装逼的对象

1.流式布局

        对于流式布局可以这样理解，宽度用的百分比、高度固定。但是这样一想就有问题啊。在iphone6下简直完美，但是一到那个iphone8PS下面就有点难看了。想想原因就是因为长度变化了高度没有变化引起的...

2.使用ViewPort 

viewport 是用在meta标签上的 :

<meta name="viewport" content="width=device-width,maximum-scale=1.3,user-scalable=no">

device-width 表示宽度是设备屏幕的宽度

maximum- scale 指的是能够放大的比例

user - scalable 指的是用户能否进行缩放

3.固定宽度

        这个我就不说了...

4.响应式做法

        @media 媒体查询做法，很累的

5.最后就是我经常用的rem

        rem 的原理就是给HTML标签设置一个font-size 然后按照设计稿的尺度除以html的font-size就好了

        html {

            font -size：20px

        }

        设计稿上假设在750宽度下量出来button的高度是150px 那么对应的rem就是

        150*2*20 = 3.75rem 除以二是因为设计稿的PX数一般是真正手机上的两倍

        对应不同的手机一般使用JS做适配（css 对凌乱的安卓市场不适用）

        翠花上酸菜...哦，上代码

       这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为 750，则为(750,750)
(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;


function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}


if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();


win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);


win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);


if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);

 大神请手下留情