在引入vant的时候,我看到官方推荐了两个自动转换px为rem的插件,一个叫postcss-pxtorem,一个叫lib-flexible

他们的用法如下:

安装插件:

安装postcss-pxtorem

  npm install postcss-pxtorem --save-dev

安装lib-flexible

由于时间的问题,lib-flexible其实已经弃用了,现在是使用名为amfe-flexible的插件,amfe-flexible实际上就是在lib-flexible的基础上更新的,所以用法都是一样。

npm i -s  amfe-flexible

安装完毕只需要引入amfe-flexible

引入插件:

main.js文件引入:

import 'amfe-flexible'

创建配置文件:

在根目录,和package.json同级,创建一个名为postcss.config.js的文件,然后里面的内容我直接照搬vant提供的。

如果有这个文件,可以自行修改里面的内容,没有才创建。

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

然后保存,这个时候我们再去vue里面,对元素设置px,运行时会发现网页上自动转换成了rem单位。

百度到一个新的配置

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

黑名单

顾名思义,在黑名单中的类名,将不会自动rem转换

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      selectorBlackList: ['.van-notify',],
    }
  }
}
分类: vue 项目实战 标签: vue cli4rem换算postcss-pxtoremlib-flexiblamfe-flexible

评论

暂无评论数据

暂无评论数据

目录