1、单位
- em：是一个相对单位，1em等于当前元素或父元素的font-size值。
- rem：是一个相对单位，1rem等于根元素的font-size值。
- vw / vh：把屏幕分为100份，100vw等于屏幕宽度，1vw等于屏幕宽度的1%。
2、原理
根据屏幕大小，动态设置根元素的字体大小
3、动态设置font-size
- 通过js
设置font-size，使同一段代码在不同的设备上保持一致
设计稿以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
设计稿以375px为宽度，约定1rem等于100px
375px == 100vw; 100px == 26.66667vw
html { font-size: 26.66667vw; }
要给body重置一下font-size：16px;
