移動端眾多的手機型號使得前端開發(fā)起來 難度很大。所以，為了統(tǒng)一眾多機型的適配，前端不得不采取大而全的方案去適配大多數(shù)屏幕。目前的主要解決方案有兩種：普遍方案和手淘方案。原理是通過縮放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);
說明
注意：普遍的就是假設(shè)設(shè)計稿寬度為750px,轉(zhuǎn)化為rem就是除以100px
