这里写自定义目录标题
前言
很少在pc端使用rem,不过遇到一个比较较真的ui,要求每个尺寸下都和设计稿完全一样,在自己手写媒体查询和插件之间选了后者,一劳永逸,今天就说下配置及使用;下面是在vue2.6、vue-cli4中的配置(注意:不同版本配置方式不同)
安装amfe-flexible和postcss-pxtorem
npm install postcss-pxtorem -S
npm install amfe-flexible -S
postcss-pxtorem将px转为rem;
amfe-flexible可进行屏幕自适应;
配置及使用
- 在main.js中引入amfe-flexible
import "amfe-flexible";
- 根目录下添加postcss.config.js
module.exports = () => ({
plugins: [
// autoprefixer 自动补齐 CSS3 前缀,适配不同浏览器
require('autoprefixer')({
overrideBrowserslist: [
"last 10 versions", // 所有主流浏览器最近10版本用
],
}),
require('postcss-pxtorem')({
rootValue: 192.0, //设计稿元素尺寸/10,这里设计稿宽度为1920
propList: ["*"], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']
unitPrecision: 3, //保留rem小数点多少位
selectorBlackList: ['el-input', 'el-step', 'no-'],//则是一个对css选择器进行过滤的数组,比如你设置为['el-'],那所有el-类名里面有关px的样式将不被转换,这里也支持正则写法。
replace: true,
mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
// minPixelValue: 3, //px小于3的不会被转换
})
]
});
配置完成之后,重启即可
可能遇到问题
运行报错如下
Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
这个我也是看了这篇文章解决(解决vue中安装postcss-pxtorem插件,报错.)的,就是直接指定安装postcss-pxtorem版本为5.1.1即可解决