当前第2页 返回上一页
Autoprefixer是一款自动管理浏览器前缀的插件,把Autoprefixer添加到资源构建工具(例如Grunt)后,可以完全忘记有关CSS前缀的东西,只需按照最新的W3C规范来正常书写CSS即可
1 2 3 4 5 6 7 8 9 10 11 12 13 | //我们编写的代码
div {
transform: rotate( 30 deg);
}
// 自动补全的代码,具体补全哪些由要兼容的浏览器版本决定,可以自行设置
div {
-ms-transform: rotate( 30 deg);
-webkit-transform: rotate( 30 deg);
-o-transform: rotate( 30 deg);
-moz-transform: rotate( 30 deg);
transform: rotate( 30 deg);
}
|
webpack 中配置 postcss-loader 和 postcss-preset-env 也可以处理兼容问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | module: {
rules: [{
test: /\.css$/,
use: [
// 这个 loader 取代 style-loader。作用:提取 js 中的 css 成单独文件
MiniCssExtractPlugin.loader,
// 将 css 文件整合到 js 文件中
'css-loader' ,
//修改 loader 配置
{
loader: 'postcss-loader' ,
options: {
ident: 'postcss' ,
plugins: () => [
// postcss 的插件
require( 'postcss-preset-env' )()
]
}
}
]
}]
}
// package.json
"browserslist" : {
//开发环境配置
"development" : [
"last 1 chrome version" ,
"last 1 firefox version" ,
"last 1 safari version"
],
//生产环境配置
"production" : [
">0.2%" ,
"not dead" ,
"not op_mini all"
]
}
|
相关推荐:CSS教程
以上就是css兼容性有哪些处理方式的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css/html怎样让段落空出一行
css如何将图片并排
css中background什么意思?background用法详解
5款实用css 3d特效,让你的页面更惊艳!
什么是web安全色?
网页代码中js和css指的是什么
html img图片怎么设置透明度
css怎么设置最大高度
css图片如何设置上边框距离
详解css contain新特性如何控制页面重绘与重排
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css兼容性有哪些处理方式