使用rem缩放网页的javascript代码

<script type="text/javascript">
(function(doc, win) {
var docEl = doc.documentElement,
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var recalc = function() {
var width = docEl.clientWidth;
var designWidth=320;
if (width / dpr > designWidth) {
width = designWidth * dpr;
}
docEl.dataset.width = width
docEl.dataset.percent = 100 * (width / designWidth);
docEl.style.fontSize = 100 * (width / designWidth) + 'px';
};
recalc()
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
</script>

 

请修改设计图的宽度designWidth。这段代码的好处是根元素font-size是100 计算方便，若要给页面设置宽度 1080 = 10.8rem 640 = 6.4rem 等，字号的话直接根据设计图除以100即可

  

——

转载于:https://www.cnblogs.com/pu369/p/5803259.html