The cause of
At first, it was found that the text was not vertically centered, which was thought to be caused by the line height and baseline. Later, the line height and font size were specified as 1rem height and supported by padding. However, it was found that when the same height was specified for elements, the upper height was always smaller than the lower one, resulting in the text moving up and failing to be vertically centered
why
However, it looks fine on the PC, and then automatically adjusts when the browser renders decimal PX because of the high DPI on the phone. So I wrote a random test like this:
/ / the demo
<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.42 px.;
background-color: red;
margin-top: 1px;
}
.b {
background-color: green;
}
.c {
width: 100px;
height: 1.61 px.;
margin-top: 1px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>Copy the code
Obviously the red one is 1px, the green one is 2px, and the yellow one is 1px, so the result is clear. Mobile browsers use rounding for decimals (note: this is just for demonstration, the actual space is still the original size), and the fraction removed from the previous element is added to the next element
- Red area (1.41px) – drop 0.41px – Render size 1px – Render height of next element added 0.41px
- Green area (1.41px + 0.41px = 1.82px) – Loot 0.18px – Render size 2px – Render height of next element minus 0.18px
- Yellow area (1.61px – 0.18px = 1.43px) – drop 0.43px – render size 1px – next element render size height increased by 0.43px
idea
Rem and other units have obvious benefits, but in some scenarios px is more appropriate, more flexible according to the actual situation