安装pocss插件autoprefixer

最新推荐文章于 2026-06-01 19:52:42 发布

原创最新推荐文章于 2026-06-01 19:52:42 发布 · 829 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vant

本文介绍了如何通过安装和配置autoprefixer插件来处理CSS的浏览器兼容性问题。首先，通过npm安装autoprefixer作为开发依赖。然后查看package.json确认安装成功。接着，在postcss.config.js中设置autoprefixer的规则，指定要兼容的浏览器版本，如Android 4.0及以上和iOS 8及以上。此外，还配置了postcss-pxtorem插件，用于将px单位转换为rem，以适配不同设备的屏幕。

1、安装pocss插件autoprefixer

npm install --save-dev autoprefixer

2、查看package.json

3 在postcss.config.js中添加规则

      'autoprefixer': {
        'overrideBrowserslist': [
          // 'ie >= 8',   //兼容ie7以上浏览器
          // 'Firefox >= 3.5', //兼容火狐版本号大于3.5浏览器
          // 'chrome >= 35',   //兼容chrome版本号大于35浏览器
          // 'opera >= 11.5',   //兼容opera版本号大于11.5浏览器
          'Android >= 4.0', 
          'iOS >= 8',
        ]
      },

postcss.config.js整个文件代码如下（前面已安装过postcss）

module.exports = {
    plugins: {
      'autoprefixer': {
        'overrideBrowserslist': [
          // 'ie >= 8',   //兼容ie7以上浏览器
          // 'Firefox >= 3.5', //兼容火狐版本号大于3.5浏览器
          // 'chrome >= 35',   //兼容chrome版本号大于35浏览器
          // 'opera >= 11.5',   //兼容opera版本号大于11.5浏览器
          'Android >= 4.0', 
          'iOS >= 8',
        ]
      },
      'postcss-pxtorem': {
        rootValue: 75, //设置根元素大小, 值为移动端页面值/10
        propList: ['*'], //所有属性都可以从px更改的rem的属性
        exclude: /node_modules/i, //排除node_modules目录下所有的文件
        selectorBlackList: ['vant-','.my-'], //过滤掉vant-开头的元素选择器, .my-开头的类选择器
      },
    },
  };