750px 是 iPhone6 的物理像素,即屏幕分辨率;
移动端 UI 设计稿是按照 iPhone6 设备的物理像素所给;
通过动态的获取设备独立像素,然后除以设计稿的宽度,然后设置 rem,来动态自适应字体大小;
为什么要乘100,放大一些,便于计算,只需要将设计稿量出来的 px, 小数点向左移2位,即可转换成 rem;
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 750) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
链接:https://www.jianshu.com/p/2c4c948f4c18