cli3 px转rem适配移动端_如何在vue-cli3.x中实现rem移动端适配

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单位用于适配不同宽度的屏幕，根据标签的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后，我们在写样式时，也要将值都改为设计图的一半。