移动端众多的手机型号使得前端开发起来 难度很大。所以,为了统一众多机型的适配,前端不得不采取大而全的方案去适配大多数屏幕。目前的主要解决方案有两种:普遍方案和手淘方案。原理是通过缩放meta生成不同的缩放比例和直接给根元素赋值大小。
源码
- 普遍是适配方案
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
说明
注意:普遍的就是假设设计稿宽度为750px,转化为rem就是除以100px