vue-cli3中实现rem移动端适配的有效方法：lib-flexible + postcss-pxtorem。
一、实现思路：
Rem 适配
lib-flexible 用于设置rem基准值
postcss-pxtorem 是一款postcss插件，用于将单位转化为rem
二、安装lib-flexible和postcss-pxtorem
1. 安装命令
npm install lib-flexible --save 或者 yarn add lib-flexible --save
npm install postcss-pxtorem --save-dev 或者 yarn add postcss-pxtorem --save-dev
postcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。
2. 在main.js中引入lib-flexible
import 'lib-flexible'
3. 在根目录的.postcssrc.js文件中进行配置
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5, // 换算的基数(设计图750的根字体为75，我这里设置成75的一半37.5，至于原因请看下面的注意事项)
propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
minPixelValue: 2 // 小于或等于`2px`不转换为视窗单位
}
}
}
三、使用
.demo-class {
width: 300px;
height: 200px;
background: skyblue;
}
然后我们在浏览器里定位到这个元素，既可以看到已经从px转换成了rem。
四、如何忽略单个属性
npm的官网查的postcss-pxtorem这个包的配置：
A message about ignoring properties
Currently, the easiest way to have a single property ignored is to use a capital in the pixel unit declaration.
// `px` is converted to `rem`
.convert {
font-size: 16px; // converted to 1rem
}
// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers
.ignore {
border: 1Px solid; // ignored
border-width: 2PX; // ignored
}
大致意思就是说：目前，忽略单个属性的最简单的方法是在像素单元声明中使用大写。
我尝试了一下，把px改成Px、PX就行啦，
五、注意事项
rootValue这个配置项的数值设置一般我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把rootValue设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
至于这里我为什么用的是37.5呢？是因为项目中会引用vant、mint-ui这样的第三方UI框架，因为第三方框架没有兼容rem，单位使用px，将rootValue的值设置为设计图宽度75的一半，即可以1:1还原vant、mint-ui的组件，否则会样式会有变化，例如按钮会变小。
我们将rootValue设置成37.5后，我们在写样式时，也要将值都改为设计图的一半。
网友评论