当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue Cli3.x-4.x 实现rem适配

Vue Cli3.x-4.x 实现rem适配

2020年07月17日  | 移动技术网IT编程  | 我要评论

Vue移动端rem适配

1.安装lib-flexible和postcss-px2rem

    npm install lib-flexible --save
    npm install postcss-px2rem --save

2.在main.js中引入lib-flexible

    import 'lib-flexible'

3.由于Vue Cli3及以后的版本省去了可见的配置项,需要自己在根目录(也就是package.json同级目录)下新建vue.config.js文件，在文件中写入以下代码

    module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5 //根据设计图 
                //375的图就给37.5，也就是1rem=37.5px
              })
            ]
          }
        }
    },
}

4.重启服务，此时px已经被转换成rem啦

（以上不足之处欢迎指出，共同进步）

本文地址：https://blog.csdn.net/z19960925/article/details/107376438

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网