基于vue-cli3
下载amfe-flexible
amfe-flexible是淘宝项目组开发出来的一个开源插件,会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size
cnpm install amfe-flexible -S
下载postcss-px2rem
postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件
cnpm install postcss-px2rem -S
在main.js里引入amfe-felxible
import 'amfe-flexible'
在vue.config.js文件里面配置postcss
module.exports = { css: { loaderOptions: { css: {}, postcss: { plugins: [ require('postcss-px2rem')({ remUnit: 37.5 }) ] } } } }
本文作者为gengboxb,转载请注明。