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