In the web page, although px, em and rem can be used to indicate the size, there are still differences between them, and each has advantages and disadvantages.
px means "absolute size". Advantages: setting the element size and position in px units is more stable and precise. Disadvantages: Can't dynamically change with browser zoom. Therefore, in responsive web pages, try not to use px units.
em stands for "relative size", the advantage: the size can change with the screen size of the device. Disadvantages: You need to pay attention to define the font size of the current object. If not defined, the size is relative to the browser's default font size.
rem is a relative unit newly added in css3. The reference object of rem is the font size of the root element <html>, so you only need to determine the font size of the root element.
In the browser, the default font size is 16px, in unadjusted browsers, 1em = 16px, if you change the html node font, then 1em = the changed font size.
Note: Another feature of em is inheritance, and the child node inherits the font size of the parent node.
In rem, all nodes inherit the font size of the root HTML node. When the font size of the HTML root node is set, the font size of all other nodes on the page is 1rem = The current HTML root node defines the pixel size
Note: In the browser, the minimum font size is 12px. So when the font size is set to 10px, 1rem will be equal to 12px, and 1.2rem will be equal to 12px.
In the web page, generally for the convenience of calculation, "62.5" will be used to solve the problem:
html { font-size:62.5% } /*=10px*/
body { font-size:1.4rem } /*=14px*/
div { font-size:2.4rem } /*=24px*/
In the actual process, some browsers will not support rem units, you can make the following improvements:
html { font-size:62.5% }
body {
font-size:14px;
font-size:1.4rem;
}
div {
font-size:24px;
font-size:2.4rem;
}
Reference article: https://www.zcfy.cc/article/understanding-and-using-rem-units-in-css-1411.html