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