1站刑、單位
- em：是一個相對單位掂碱，1em等于當(dāng)前元素或父元素的font-size值商佛。
- rem：是一個相對單位，1rem等于根元素的font-size值整葡。
- vw / vh：把屏幕分為100份件余，100vw等于屏幕寬度，1vw等于屏幕寬度的1%遭居。
2啼器、原理
根據(jù)屏幕大小，動態(tài)設(shè)置根元素的字體大小
3俱萍、動態(tài)設(shè)置font-size
- 通過js
設(shè)置font-size端壳，使同一段代碼在不同的設(shè)備上保持一致
設(shè)計稿以375px為寬度，約定1rem等于100px
(function () {
function resizeBaseFontSize() {
var rootHtml = document.documentElement,
deviceWidth = rootHtml.clientWidth;
if (deviceWidth > 640) {
deviceWidth = 640;
}
rootHtml.style.fontSize = deviceWidth / 3.75 + "px";
}
resizeBaseFontSize();
window.addEventListener("resize", resizeBaseFontSize, false);
window.addEventListener("orientationchange", resizeBaseFontSize, false);
})();
- 通過vw
設(shè)計稿以375px為寬度鼠次，約定1rem等于100px
375px == 100vw; 100px == 26.66667vw
html { font-size: 26.66667vw; }
要給body重置一下font-size：16px;
