009-rem 适配

宽度(px) = font-size * rem
比如 100(px) = font-size(50px) * rem(2)

安装 amfe-flexible (根据屏幕大小改变根字体大小:即是html的 font-size 值)

npm i amfe-flexible --save-dev
然后在main.js导入

import  "amfe-flexible";

px 转 rem

安装postcss-pxtorem
npm i postcss-pxtorem --save-dev
vue.config.js里配置

rem配置.jpg

//  vue.config.js
    const autoprefixer = require("autoprefixer");
    const pxtorem = require("postcss-pxtorem");
    module.exports = {
        css:{
            loaderOptions:{     
                postcss:{
                    plugins:[
                        autoprefixer(),
                        pxtorem({
                            rootValue:37.5,
                            propList:["*"],
                            //可选 ???
                            selectorBlackList:["van-circle__layer"]
                        })
                    ]
                }       
            }   
        }   
    }
新建reset.css 文件
body{
    font-size:16px !important;
}

导入到main.js

import "@/assets/css/reset.css"

你可能感兴趣的:(009-rem 适配)