webpack之移动端css px自动转换成rem
程序员文章站
2022-04-11 11:46:59
...
1.安装依赖：
cnpm i px2rem-loader lib-flexible -D
2.配置：
{
test:/\.css/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
{
loader:'px2rem-loader',
options:{
remUnit:75, //75代表1rem
remPrecision:8 //保留小数点后多少位
}
}
]
}3.我们需要在html中引入计算根元素的js模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../node_modules/lib-flexible/flexible.js"></script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<p>我的世界</p>
<div></div>
</body>
</html>配置完成，打包即可。
下面我们来对比转换前后的变化
转换前：
body{
border: 1px solid red;
width: 100%;
}
div{
width: 375px;
height: 200px;
background: red;
}转换后：
body {
border: 0.01333333rem solid red;
width: 100%;
}
div {
width: 5rem;
height: 2.66666667rem;
background: red;
}