参照vant官网的Rem 布局适配
https://youzan.github.io/vant/#/zh-CN/advanced-usage
postcss-pxtorem对移动端进行适配——可在编译过程中将px转化为rem
lib-flexible——用于设置 rem 基准值
安装:
npm install postcss postcss-pxtorem --save-dev
npm i -S amfe-flexible
配置
可在vue.config.js或postcss.config.js进行配置,cli4版本以上默认无这两个配置文件,可以手动创建
// vue.config.js
const pxtorem = require('postcss-pxtorem')
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
pxtorem({
rootValue: 37.5,
propList: ['*'],
// 该项仅在使用 Circle 组件时需要
// 原因参见 https://github.com/youzan/vant/issues/1948
selectorBlackList: ['