px Pixels (Pixel). Relative length units. Pixel px is relative to the screen resolution (PAD/PHONE/PC) of different device displays. (quoted from CSS2.0 manual)
1em refers to the size of a font, which inherits the font size of the parent element, and therefore is not a fixed value. The default font size for any browser is 16px.
PX is relative to the screen resolution, and EM is relative to the parent Div, so it's more appropriate to use EM in a responsive layout because any browser default font size is fixed and different device screen resolutions vary.
EM has the following characteristics:
1. The value of EM is not fixed;
2. Em inherits the font size of the parent element.
So when we are writing CSS, we need to pay attention to two points:
1. Declare font-size=62.5% in the body selector;
2. Divide your original PX value by 10 and then replace it with EM as the unit;
3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.
<body style= "font-size:62.5%" > 1em default is 16px, here 1em into 10px
<aside style= "FONT-SIZE:1.2EM;" > Inherit body here the 1.2em is 12px
<p style= "FONT-SIZE:1EM;" ></p> inherits from aside, so here's 1em is also 12px
</aside>
</body>
This is to avoid the 1.2 * 1.2 = 1.44 phenomenon. For example, when you declare a font size of 1.2em in aside, you can only have 1em when declaring the font size of p, not 1.2em, because this em is not em, it becomes 1em=12px because it inherits the font height of aside.
Why use EM to set font size without PX in a responsive layout
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
