起因
起初发现文字未垂直居中，以为是行高和基线引起，后来将行高，字体大小指定为1rem高度用padding支撑，但发现为元素指定相同高度的情况下，上面的高度永远比下面的小一些，导致文字上移，未能垂直居中
原因
但是PC上显示正常，随后想到可能是因为手机dpi高导致浏览器渲染小数形式的px时，自动做出调整。所以随便写了个测试，如下：
// 小demo
<!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>
<style media="screen">
.a, .b {
width: 100px;
height: 1.42px;
background-color: red;
margin-top: 1px;
}
.b {
background-color: green;
}
.c {
width: 100px;
height: 1.61px;
margin-top: 1px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
image.png
很明显红色的是1px，绿色的是2px，黄色的是1px，那结果就很明确了，手机浏览器对于小数渲染采用四舍五入的方式（注意：只是展示，实际占位还是原始大小），上一个元素舍去的部分会和下一个元素相加
- 红色区域（1.41px）- 舍去0.41px - 渲染大小为1px - 下一个元素渲染高度加上0.41px
- 绿色区域（1.41px + 0.41px = 1.82px） - 掠夺0.18px - 渲染大小为2px - 下一个元素渲染高度减去0.18px
- 黄色区域（1.61px - 0.18px = 1.43px）- 舍去0.43px - 渲染大小为1px - 下一个元素渲染大小高度增加0.43px
想法
rem等单位的好处很明显，但是在有些场景下还是px更加合适，多灵活按照实际情况运用
