1. CSS前缀自动补全
为什么需要前缀自动补全呢？这是因为市场上浏览器内核不一样，为了对css3的兼容就需要补全相应的前缀。
1.1 安装插件
npm i postcss-loader autoprefixer -D
1.2 使用postcss-loader
1. 配置postcss-loader
{
test: /\.less$/,
use: [MiniCSSExtractPlugin.loader, 'css-loader', 'less-loader','postcss-loader']
},
2. 增加配置文件postcss.config.js
module.exports = {
plugins:[
require('autoprefixer')({
overrideBrowserslist: ['last 2 version', '> 1%', 'ios 7']
})
]
}
overrideBrowserslist数组中的值是css自动补全的一些规则，这里对 最新两个版本，使用人数>1%的版本, ios7以上的版本 进行自动补全。
3. 打包输出
配置完成后我们打包输出看一下效果吧~
2. 移动端css单位转换自适应
rem是移动端响应式布局必不可少的单位，rem是相对单位，1rem等于根节点的font-size的大小。通常我们会采用手淘的库，lib-flexible来动态的计算根元素的大小，再按比例转换将设计稿上的px单位换算成rem单位，进行样式编写，这样给我们带来了很大的计算工作量，webpack也给我们提供了自动将px转换成rem的loader——px2rem-loader.
2.1 安装插件
npm i lib-flexible -S
npm i px2rem-loader -D
2.2 配置px2rem-loader
{
test: /\.less$/,
use: [MiniCSSExtractPlugin.loader, 'css-loader', 'less-loader', 'postcss-loader', {
loader: 'px2rem-loader',
options: {
remUnit: 75, // rem相对px转换的单位, 1rem = 75px
remPrecision: 8 //精度,后面小数点的位数
}
}]
},
2.3 将lib-flexible内联到html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<script>
<%=require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')%>
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
这样我就完成了移动端CSS px自动转换成rem的配置啦
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！