移动端rem.js

/**
* 以下这段代码是用于根据移动端设备的屏幕分辨率计算出合适的根元素的大小
* 当设备宽度为375(iPhone6)时,根元素font-size=20px; 依次增大;
* 限制当为设备宽度大于768(iPad)之后,font-size不再继续增大
* scale 为meta viewport中的缩放大小
*/


!function(e) {
function t(a) {
if(i[a]) return i[a].exports;
var n = i[a] = { exports: {}, id: a, loaded: !1 };
return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
}
var i = {};
return t.m = e, t.c = i, t.p = "", t(0)
}

([function(e, t) {
"use strict";
Object.defineProperty(t, "__esModule", { value: !0 });
var i = window;
t["default"] = i.flex = function(normal, e, t) {
var a = e || 100,
n = t || 1,
r = i.document,
o = navigator.userAgent,
d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
l = o.match(/U3\/((\d+|\.){5,})/i),
c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s = i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s = 1); var u = normal ? 1 : 1 / s,
m = r.querySelector('meta[name="viewport"]');
m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 * s * n + "px" }, e.exports = t["default"] }]);

flex(false, 100, 1);



(function (doc, win) {
var docEl = win.document.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
/**
* ================================================
* 设置根元素font-size
* 当设备宽度为375(iPhone6)时,根元素font-size=20px;
× ================================================
*/
var refreshRem = function () {
var clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth;
if (!clientWidth) return;
var fz;
var width = clientWidth;
fz = width / 750 * 20;
docEl.style.fontSize = fz + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, refreshRem, false);
doc.addEventListener('DOMContentLoaded', refreshRem, false);
refreshRem();

})(document, window);

 

posted @ 2018-07-09 16:14  超级酸  阅读(704)  评论(0编辑  收藏  举报