VUE 使用 amfe-flexible + postcss-pxtorem 自适配不同不分辨率

1、安装

npm install amfe-flexible --save
npm install postcss-pxtorem@5.0 --save
 我的环境是vue2.0  postcss-pxtorem要指定5.0版本要不然会报错!!!

2、配置postcss-pxtorem

配置postcss-pxtorem,可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置,权重从左到右降低,没有则新建文件,只需要设置其中一个即可:

为了方便 我是在 vue.config.js 配置的代码配置如下:

module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}

在.postcssrc.js或postcss.config.js中配置如下:

module.exports = {
    "plugins": {
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

注意点:

1、rootValue根据设计稿宽度除以10进行设置,这边假设设计稿为375,即rootValue设为37.5;

2、propList是设置需要转换的属性,这边*为所有都进行转换。



3、使用
在main.js中引入
import 'amfe-flexible';

 

要写CSS的时Px需转为rem
图片也需要转为rem
.logo img{
        width: .5467rem;
    }

 



posted @ 2024-12-10 09:53  ziff123  阅读(15)  评论(0编辑  收藏  举报