建议写两套代码，pc端仍旧用px，而移动端用rem。
我们知道，rem是相对html的font-size值换算的，这个值在pc端默认是16px；而在移动端，我们可以将其直接设定为100px。vscode有个px换算rem的插件，将默认值设置为100px即可。
rem.png
也就是说，在开发阶段，把1rem=100px进行开发，等开发完成后，用如下js进行统一换算：
<!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>Document</title>
<style>
.cont {
font-size:0.14rem;
margin-top: 1rem;
padding-left:0.5rem;
background:chocolate;
}
</style>
</head>
<body>
<div class="cont">
你好
</div>
</body>
</html>
<script>
const getRem = (pwidth = 750, prem = 100) => {
let html = document.getElementsByTagName("html")[0];
let oWidth = document.body.clientWidth || document.documentElement.clientWidth;
// if (oWidth > 600) oWidth = 600
html.style.fontSize = oWidth / pwidth * prem + "px";
window.onresize = function () {
getRem(pwidth, prem)
};
}
getRem(375,100);
</script>
box.png
移动端为什么一定要用rem呢？
如果用px，同样14px的字体大小，可能在有些手机上看是合适的，而有些设备如ipad就看着太小，而用了rem，因为是动态计算了html根上的font-size值，这样就达到了适配设备的目的。
网友评论