响应式布局 | js + rem

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>

效果如下：