vue-cli3.0使用amfe-flexible + postcss-pxtorem，适配移动端并px自动转rem

本文主要是介绍vue-cli3.0使用amfe-flexible + postcss-pxtorem，适配移动端并px自动转rem，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

已初始化vue-cli3项目

第一步：下载 postcss-pxtorem（npm i postcss-pxtorem -D）

第二步：下载 amfe-flexible（npm i amfe-flexible -S）

第三步：在main.js中引入amfe-flexible

import 'amfe-flexible/index'

第四步：新建vue.config.js，配置postcss-pxtorem

module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({ // 把px单位换算成rem单位rootValue: 75, // 换算的基数(设计图750的根字体为75)// selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项propList: ['*']})]}}},configureWebpack: config => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...} else {// 为开发环境修改配置...}}
}

第五步：重启项目，就可以看到样式px转为rem

这篇关于vue-cli3.0使用amfe-flexible + postcss-pxtorem，适配移动端并px自动转rem的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---