rem的基本使用
<style>
html { font-size: 16px; /*设置基准大小*/ }
#root div:nth-child(1) { font-size: 1rem; }
#root div:nth-child(2) { font-size: 2rem; }
#root div:nth-child(3) { font-size: 3rem; }
</style>
<div id="root">
<div>1 rem</div>
<div>2 rem</div>
<div>3 rem</div>
</div>
结果如下:
结合JS实现在不同宽度的视口下自动调整字体大小
<script>
let autoSize = () => {
//获取设备宽度
let w = document.documentElement.clientWidth;
// 320 为起始屏幕的宽度,20为在起始屏幕下的字体大小基准值,字号最大为 40
let n = 20 * (w / 320) > 40 ? 40 + 'px' : 20 * (w / 320) + 'px';
// 修改根字体大小
document.documentElement.style.fontSize = n;
}
//给加载和屏幕尺寸变化添加事件监听
window.addEventListener('load', autoSize);
window.addEventListener('resize', autoSize);
</script>
效果如下: