flex兼容性问题解决方案-CSS3属性加前缀

1 兼容性写法

flex布局存在兼容性问题，比如ios8对flex不兼容问题，为了解决兼容性问题，我们将普通代码改为兼容性代码。
普通代码：

.ec-list{
    display: flex;
}
.ec-item{
    flex:1;
}

兼容性代码：

.ec-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex; 
}

.ec-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1; 
}

2 借助插件

我们自己手动将普通代码改为兼容性代码，比较麻烦，也容易出现错误，所以建议使用postcss插件的autoprefixer自动加前缀，避免不必要的错误。

2.1 使用 autoprefixer 插件

安装依赖：

npm i postcss-loader autoprefixer -D

2.2 根据 Can I Use 规则

地址：https://caniuse.com/。

2.3 编写测试文件

给search.less添加display: flex;

@font-face{
  font-family: 'SourceHanSerifSC-Heavy';
  src: url('./fonts/SourceHanSerifSC-Heavy.otf') format('truetype');
}

.search-text {
  font-size: 48px;
  color: green;
  font-family: 'SourceHanSerifSC-Heavy';
  display: flex;
}

2.4 配置postcss-loader和autoprefixer

【注意】：postcss-loader 执行顺序必须保证在 css-loader 之前，建议还是放在 less或者 sass 等预处理器之后更好。即loader顺序：less-loader -> postcss-loader -> css-loader -> style-loader 或者 MiniCssExtractPlugin.loader，其实postcss-loader放在less-loader之前问题也不大，平时使用的less里面的语法基本不会和 autoprefixer 处理产生冲突的。

module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({
                  browsers: ['last 2 version', '>1%', 'ios 7']
                })
              ]
            }
          }
        ]
      },
    ]
  },
};

2.5 执行npm run build命令

如果出现下面的提示：

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

最新的 autoprefixer 版本里面建议把 browserslist 写在package.json或者 .browserslistrc 文件里；可以直接把browsers改成overrideBrowserslist。

2.6 实现效果