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      

2.6 實作效果