最近写了移动端的项目,没有考虑到要兼容ios8。flex布局和css3的transform等没有起到作用。Safari是用webkit内核,需要增加一些前缀,才能起到作用。用webpack构建css样式的时候,使用postcss-loader加载器去做自动加载前缀。
flex布局,添加前缀:
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items:center;
-webkit-align-items: center;
align-self: center;
-webkit-align-self: center;
tranform添加前缀:
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
使用webpack进行构建项目,sass和scss需要编译,需要安装postcss-loader、style-loader、sass-loader、node-loader、autoprefixer
npm install postcss-loader autoprefixer sass-loader node-loader style-loader --save-dev
在webpack.config.js中把scss进行编译,最终配置如下:
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: true,
'-autoprefixer': true
}
},
'sass-loader',
{
loader: "postcss-loader",
options: {
plugins:
[autoprefixer({
browsers: ['ie >= 8','Firefox >= 20', 'Safari >= 5', 'Android >= 4','Ios >= 6', 'last 4 version'],
remove: true
})],
sourceMap:true
}
}
],
allChunks: true
})
},
在package.json增加如下