Vue移动端rem适配——Postcss的配置文件.postcssrc.js的基本配置

Vue移动端rem适配——postcss-pxtorem、Postcss的配置文件.postcssrc.js的基本配置

（1）PostCss介绍

PostCss是一个处理 CSS 的处理工具，Vue CLI 内部使用了 PostCSS。本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如本次我们的rem适配使用的插件：

postcss-pxtorem 实现px单位转换为rem

这是Vue对于postCSS的介绍

（2）Autoprefixer 插件的配置

Vue官方已说明，默认开启了 autoprefixer 因此一般我们不需要对此进行配置，它是一个自动给浏览器添加前缀的PostCSS插件。

这里的browsers用于配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

警告意思就是说你应该将 browsers 选项写到 package.json 或 .browserlistrc 文件中。

具体语法参考官方文档：autoprefixer

（3）postcss-pxtorem 插件的配置

这里的rootValue是用来设置根元素字体大小。

propList 用来设定可以从 px 转为 rem 的属性

• 例如 * 就是所有属性都要转换，width 就是仅转换 width 属性

但是这里有一个问题，就是这个插件默认会转换整个项目里所有的px单位，Vant的样式是没有问题的，但是我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。怎么解决呢？

• 如果是 Vant 的样式，就把 rootValue 设置为 37.5 来转换
• 如果是我们的样式，就按照 75 的 rootValue 来转换

因此最终完成的配置如下：

配置完毕，把服务重启一下，最后测试，非常nice