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 规则
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
。