vue中使用rem,结合postcss-pxtorem和amfe-flexible实现移动端适配

1.安装
npm install postcss-pxtorem --save-dev
npm install amfe-flexible --save

2.在main.js中引入
import 'amfe-flexible';

3.在.postcssrc.js 中配置 (vue-cli3.0 的版本在postcss.config.js中配置)

module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}


//在脚手架为4.0下,不会生成postcssrc.js文件,可以在根目录下新建一个vue.config.js文件
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  },
  lintOnSave: false,//关闭代码验证报错提醒
}

https://blog.csdn.net/lander_xiong/article/details/89704777

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容