基于vw的响应式排版布局

html{
 /*iphone6的375px尺寸作为16px基准，600px时字体大小为18px*/
    font-size: calc(100% + 2 * (100vw - 375px) / 225);
}
@media screen and(min-width: 600px) {
        html{
            /* 600px-1000px每100像素宽字体增加1px(18px-22px) */
            font-size: calc(112.5% + 4*(100vw - 600px)/400);     
            };
}
@media screen and(min-width: 1000px){
        html{
            /* 1000px往后是每100像素0.5px增加 */
            font-size: calc(137.5% + 5*(100vw - 1000px)/1000);
           }
}

计算公式：字体范围*（（当前屏幕大小-最小适应大小）/（最大适应-最小适应））；

屏幕越大时，根元素的字体也会变大，如果页面上的元素使用相对于根元素的单位rem，页面元素尺寸也会变大。

另：基础字体大小使用px时，safari浏览器不支持，因此，使用百分比。

转载于:https://www.cnblogs.com/wayofeng/p/6027700.html