遇到項目需求變更，需要自適應(yīng)4:3主流屏幕呢燥，于是采用了rem崭添，和動態(tài)js計算根元素。
1.rem
rem是指相對于根元素字體大小的單位叛氨，一個相對單位呼渣。rem可以做到隨著根元素的字體大小隨之變化，達(dá)到自適應(yīng)屏幕的效果寞埠。
2.步驟
-
在
html的head中加上meta標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
代表寬度是設(shè)備寬度屁置，同時不允許縮放。
-
設(shè)置根元素-相對于根元素
html
html {font-size: 100px;} //100px方便計算仁连，實際值需要自己確定
-
計算不同屏幕時根元素
可以使用媒體監(jiān)聽蓝角，也可以使用動態(tài)js計算，本文因為不確定自適應(yīng)數(shù)量使用動態(tài)計算
var deviceWidth
setHtmlFontSize()
if (window.addEventListener) {
window.addEventListener('resize', function () {
setHtmlFontSize()
}, false)
}
function setHtmlFontSize () {
// 1366是設(shè)計稿的寬度，當(dāng)大于1366時采用1366寬度使鹅，比例也是除以13.66
deviceWidth = document.documentElement.clientWidth > 1366 ? 1366 : document.documentElement.clientWidth
document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 13.66 + 'px !important'
}
-
根據(jù)高保真還原
每個單位大小用實際值除以100得到相對的rem值。
然后就完美還原辣患朱！
