曾经用flexible.js通过js动态计算html的font-size的方式已经不可取了。

经过很多项目测试，发现最好的方式还是calc()结合vw、rem是最可取的最新方案。

有了vw单位，再配合calc()函数进行计算，无须使用任何JavaScript代码，就可以实现基于设备宽度的移动端布局适配方案。

例如，希望375px~414px的宽度区间的根字号大小时16px~18px，就可以这样设置：

html{
    font-size:16px;
}
@media screen and (min-width:375px){
    html{
        /* 375px宽度使用16px基准尺寸，414px宽度时根字号大小正好是18px*/
        font-size:calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width:414px){
    html{
        /* 屏幕宽度从414px到1000px，根字号大小累积增加4px */
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width:1000px) {
    /* 屏幕宽度从1000px往后每增加100px，根字号大小就增加0.5px */
    html{
        font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
    }
    /* 也可以设置为固定值 */
    /* html{
    	font-size: 22px;
	} */
｝

这样，无论手机的宽度是多少，都可以有一个合适的根字号大小。

此时，只需要把视觉稿对应的px尺寸使用rem表示就可以了。几乎页面上所有元素的尺寸都可以用rem表示，当然1px这种可以考虑用px。毕竟rem计算出来的值都会有精度的问题。

这段代码的优点是兼容性非常强，尺寸有弹性，纯CSS驱动，同时在宽屏下布局尺寸不至于过大（1000px宽度屏幕下的字号是22px，使用JavaScript计算，字号可能是三四十大小，尺寸太大）。

随着越来越多浏览器支持clamp()函数，也可以用更加精简的语法：

html{
    font-size: 16px;
    font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 39) , 22px);
}

rem单位布局方法不是万能的，首先渲染尺寸并不总是整数，非整数尺寸偶尔会带来一些渲染的问题，比如SVG图标尺寸不是整数的时候，边缘可能会出现奇怪的间隙，又如，需要精确知道若干个列表的高度之和的时候，如果列表的高度不是整数，则最终的高度和实际的渲染高度会有误差，在这些场景下，可以将对应元素的rem单位改成px单位进行表示，再结合media queries响应式进行微调。