- 方法一："px2rem-loader"（remUnit=75）和”lib-flexible“/setRemUnit;
webpack.config.js
module.exports={
module: {
rules: [
{
test: /\.css$/, //css处理顺口
use: [
"style-loader",
{
//style-loader是把CSS当作一个style标签插入到HTML中
loader: "css-loader", //css-loader是处理CSS中的import 和url
options: { importLoaders: 3 },
},
{
loader: "postcss-loader", //postcss是用来给CSS中根据can i use 网站的数据添加厂商前缀的
options: {
postcssOptions: {
plugins: [require("autoprefixer")],
},
},
},
{
loader: "px2rem-loader", //把px自动转成rem
options: {
remUnit: 75, //750设计稿 750/10
remPrecesion: 8, //计算精度保留8位小数
},
},
],
},
{
test: /\.less$/, //处理less
use: [
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 3 },
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [["autoprefixer"]],
},
},
},
{
loader: "px2rem-loader",
options: {
remUnit: 75, //750设计稿 750/10
remPrecesion: 8,
},
},
"less-loader",
],
},
],
},
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,inital-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
/>
<link
rel="stylesheet"
href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css"
/>
<title>珠峰课堂</title>
</head>
<body>
<script>
方法1："px2rem-loader"和入口引入”lib-flexible“；
方法2："px2rem-loader"和下面的函数 setRemUnit；
let docEle = document.documentElement;
function setRemUnit() {
let html = document.getElementsByTagName("html")[0];
html.style.fontSize = docEle.clientWidth / 10 + "px"; // 屏幕宽度除以10
}
setRemUnit();
window.addEventListener("resize", setRemUnit);
示例：750设计稿，图片 宽度 100px,高度 50px
在 375 屏幕(iphone 6/7/8)上开发,在样式文件里直接写如下：
image{
width:100px; //对应会计算出 (100/75 = 1.333333rem), 1.333333rem=1.333333*37.5=50px，最终编译出750设计稿一半尺寸，不需要手动除以2了
height:50px; //（50/75=0.666666rem）,0.666666rem=0.666666*37.5=25px,
}
</script>
<div id="root"></div>
</body>
</html>
- 方法二：这种方法只需要 setRemUnit+将750设计稿中的测量的尺寸 口头除以100将计算得到的rem值写在 样式文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,inital-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
/>
<link
rel="stylesheet"
href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css"
/>
<title>学习课堂</title>
</head>
<body>
<script>
注意：这种不需要在webpack.config.js里配置 将px转成rem单位，都是我们将750设计稿中测量的尺寸口头除以100得到rem值；
let docEle = document.documentElement;
function setRemUnit() {
let html = document.getElementsByTagName("html")[0];
html.style.fontSize = (docEle.clientWidth / 750) * 100 + "px"; //iphone6/7/8 (375/750)*100=50px
}
setRemUnit();
window.addEventListener("resize", setRemUnit);
/*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;
100代表换算比例，这里写100是为了以后好算,
比如，750设计稿,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
// 注意：1.一般我们的UI设计稿是750，此时设置 html的font-size=100px，方便计算，即100px=1rem;
// 2.如果设计稿的尺寸是750，375屏幕上开发时，其实设计稿的尺寸要除以2的，
// 3.但是如果 我们将750设计稿的根元素按100px，375屏幕根元素按50px设计，此时设计稿的尺寸是已经除以了2的,不需要在除以2换算了；
// 4.所以如果是在 375px 屏幕上开发时，此时设置 html的font-size=50px，即50px=1rem;
// 5.所以如果是在 750px 屏幕上开发时，此时设置 html的font-size=100px，即100px=1rem;
// 上面第4点和第5点是等价的
// 换算栗子：
// 前提条件：750设计稿我们设计的 100px=1rem，所以 375px 的设备上，设计成 50px=1rem;
// 设计稿是宽度750px,测量的 图片宽度和高度分别是100px和60px,我们会口头通过实际尺寸除以100计算，100px/100=1rem,60px/100=0.6rem,
// 如果是在 375px的设备上开发(我们一般是在模拟的 iphone 6/7/8),此时 图片的宽度和高度就写 1rem和0.6rem(375px设备上的 1rem=50px),
// 计算出来的 1rem=50px，0.6rem=30px，已经等比例除以2了，不用再次除以2了
</script>
<div id="root"></div>
</body>
</html>
- 方法三： (postcss-px-to-viewport)[github.com/evrone/post…] (行内样式的 px 转 vw)[segmentfault.com/a/119000001…]
