rem布局原理：使用js動(dòng)態(tài)改變html的字體大小+rem的特性，來保證最初的設(shè)計(jì)圖中每個(gè)元素的尺寸比例不變祷舀，以適用于不同尺寸的設(shè)備能夠正常顯示瀑梗。
(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 = 50 * (clientWidth / 375) + 'px';
console.log(docEl.style.fontSize)
? ? };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
引用在main.js中
對(duì)應(yīng)關(guān)系：
代碼的意思是，
在寫頁面的過程中使用屏幕寬度為375px（蘋果6裳扯、7抛丽、8）的時(shí)候，50*（375/375）html字體大小為50px也就是1rem饰豺；
如果一個(gè)元素寬度為100%的時(shí)候就是7.5rem（375px/50px）亿鲜；
如果設(shè)備寬度是750px的時(shí)候，50*（750/375）html字體大小為100px冤吨，以此類推成比例增長蒿柳；
在設(shè)計(jì)圖中有一個(gè)元素寬度是700px，由上可知html字體大小為100px漩蟆，那么700px就是700px/100px=7rem垒探、元素寬度為124px那么就是1.24rem；
由于100px好算數(shù)爆安，所以移動(dòng)端一般把設(shè)計(jì)圖寬度縮放到750px再去量每個(gè)元素的像素叛复，使用寬度375的設(shè)備寫頁面。
如果上面的理解起來實(shí)在費(fèi)勁扔仓，簡單的辦法，根據(jù)設(shè)計(jì)圖寬度去修改公式咖耘。
docEl.style.fontSize = 100 * (調(diào)試設(shè)備寬度 / 設(shè)計(jì)圖寬度) + 'px';
在寫頁面的過程中保持???調(diào)試設(shè)備寬度?等于?設(shè)計(jì)圖寬度?就可以翘簇。
這樣就又可以愉快的使用123px是1.23rem的計(jì)算了，
使用rem布局做完之后無論設(shè)備寬度如何改變儿倒，內(nèi)容都會(huì)等比例的去布置版保；
