起因
起初發(fā)現(xiàn)文字未垂直居中，以為是行高和基線引起，后來將行高，字體大小指定為1rem高度用padding支撐，但發(fā)現(xiàn)為元素指定相同高度的情況下，上面的高度永遠比下面的小一些，導致文字上移，未能垂直居中
原因
但是PC上顯示正常，隨后想到可能是因為手機dpi高導致瀏覽器渲染小數(shù)形式的px時，自動做出調(diào)整。所以隨便寫了個測試，如下：
// 小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，那結果就很明確了，手機瀏覽器對于小數(shù)渲染采用四舍五入的方式（注意：只是展示，實際占位還是原始大小），上一個元素舍去的部分會和下一個元素相加
- 紅色區(qū)域（1.41px）- 舍去0.41px - 渲染大小為1px - 下一個元素渲染高度加上0.41px
- 綠色區(qū)域（1.41px + 0.41px = 1.82px） - 掠奪0.18px - 渲染大小為2px - 下一個元素渲染高度減去0.18px
- 黃色區(qū)域（1.61px - 0.18px = 1.43px）- 舍去0.43px - 渲染大小為1px - 下一個元素渲染大小高度增加0.43px
想法
rem等單位的好處很明顯，但是在有些場景下還是px更加合適，多靈活按照實際情況運用
