rem + 媒体查询 + font-size

rem 参照 是 html 根元素的大小

@media screen and (min-width:375px ){
    font-size:16px
}
@media screen and (min-width: 750px){
    font-size:18px
}
@media screen and (min-width:1080px){
    font-size:19px
}

• 缺陷
  • 需要写大量的媒体查询
  • 不够动态的实时的 变化css

jsresize 动态修改 根元素的 font-size

lib-flexible 引入 resize

pxtorem

• 手动计算
• less 混入

    .pxtoRem(@px){
        result:1rem * @px / 37.5
    }

• postcss pxtorem 插件

• vscode 插件

视口宽度高度

pxtovw

• 手动计算

• less、scss混入传参数

• webpack postcss-px-viewport-8-plugin

• vscode 插件