移动端适配记录

1.根据rem相对字体大小，字体相对vw，即是根据屏幕宽度

1vw表示1%的屏幕宽度,而我们的设计稿通常是750px的,屏幕一共是100vw,对应750px,那么1px就是0.1333333vw,。

同时我们知道rem是相对html元素的字体大小，为了方便计算,我们取html的font-size=100px,通过上面的计算结果1px是0.13333333vw,那么100px就是13.333333vw了

所以，我们让1rem=100px=13.333333vw

也可以直接在html中设置 font-size:13.333333vw;

也可以使用css中的 calc()函数

   html {
       font-size: calc(100vw / 750 * 100);
    }

解决1px问题：transform:scale(0.5)方案

div{
    width:200%;
    height:200%;
    border:1px solid;
    content: '';
    transform:scale(0.5);
    transform-origin: left top;
}

移动端视口即当前可见区域

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

intial-scale：定义初始缩放值           

minimum-scale：定义缩小最小比例

maxmum-scale：定义放大最大比例

user-scalable：是否予许用户缩放页面，默认yes        

其中user-scalable设置为no 可以解决移动端点击事件延迟问题

2、webpack工程化适配

在工程化的今天，webpack使用postcss-pxtorem能自动实现px到vw的转化。

package.json

 "postcss-pxtorem": "5.1.1",

postcss.config.js

module.exports = {    plugins: {      autoprefixer: {},      'postcss-pxtorem':{        rootValue: 162.4, //133.4:1rem等于133.4px； //100: 1rem等于100px 75:1rem等于75px 设计稿基数 //162.4：1rem 设计稿1624*750        propWhiteList: ['*'],        exclude: /pc\S*.scss/,        minPixelValue: 1 // （数字）设置要替换的最小像素值      }    }  }

index.html（淘宝，用于js根据用户宽，动态设置font-size）

!function (e, t) { function i() { var t = n.getBoundingClientRect().width / 10; n.style.fontSize = t + "px", p.rem = e.rem = t } var a, r = e.document, n = r.documentElement, o = r.querySelector('meta[name="viewport"]'), l = r.querySelector('meta[name="flexible"]'), m = r.querySelector('meta[name="flexible-in-x5"]'), s = !0, d = 0, c = 0, p = t.flexible || (t.flexible = {}); if (o) { console.warn("将根据已有的meta标签来设置缩放比例"); var u = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/); u && (c = parseFloat(u[1]), d = parseInt(1 / c)) } else if (l) { var f = l.getAttribute("content"); if (f) { var h = f.match(/initial\-dpr=([\d\.]+)/), v = f.match(/maximum\-dpr=([\d\.]+)/); h && (d = parseFloat(h[1]), c = parseFloat((1 / d).toFixed(2))), v && (d = parseFloat(v[1]), c = parseFloat((1 / d).toFixed(2))) } } if (m && (s = "false" !== m.getAttribute("content")), !d && !c) { var x = (e.navigator.appVersion.match(/android/gi), e.chrome), g = e.navigator.appVersion.match(/iphone/gi), b = e.devicePixelRatio, w = /TBS\/\d+/.test(e.navigator.userAgent), y = !1; try { y = "true" === localStorage.getItem("IN_FLEXIBLE_WHITE_LIST") } catch (e) { y = !1 } c = 1 / (d = g || x || w && s && y ? b >= 3 && (!d || d >= 3) ? 3 : b >= 2 && (!d || d >= 2) ? 2 : 1 : 1) } if (n.setAttribute("data-dpr", d), !o) if ((o = r.createElement("meta")).setAttribute("name", "viewport"), o.setAttribute("content", "initial-scale=" + c + ", maximum-scale=" + c + ", minimum-scale=" + c + ", user-scalable=no"), n.firstElementChild) n.firstElementChild.appendChild(o); else { var E = r.createElement("div"); E.appendChild(o), r.write(E.innerHTML) } e.addEventListener("resize", function () { clearTimeout(a), a = setTimeout(i, 300) }, !1), e.addEventListener("pageshow", function (e) { e.persisted && (clearTimeout(a), a = setTimeout(i, 300)) }, !1), "complete" === r.readyState ? r.body.style.fontSize = 12 * d + "px" : r.addEventListener("DOMContentLoaded", function (e) { r.body.style.fontSize = 12 * d + "px" }, !1), i(), p.dpr = e.dpr = d, p.refreshRem = i, p.rem2px = function (e) { var t = parseFloat(e) * this.rem; return "string" == typeof e && e.match(/rem$/) && (t += "px"), t }, p.px2rem = function (e) { var t = parseFloat(e) / this.rem; return "string" == typeof e && e.match(/px$/) && (t += "rem"), t } }(window, window.lib || (window.lib = {}));

3、用js根据用户视图宽，动态设置font-size大小

<script type="text/javascript">
    function inMobile() {
        document.getElementsByTagName('html')[0].style.fontSize =
            (document.documentElement.clientWidth / 450) * 100 + 'px';
    }
    document.addEventListener('DOMContentLoaded', inMobile);
    window.onresize = inMobile;
</script>