Distinguish em and rem of CSS and CSSemrem
In css, px, em, and rem are the most commonly used units. The differences are as follows:
Px is a fixed pixel. Once it is set, it cannot be changed because it adapts to the page size.
Em and rem are more flexible than px. They are relative length units, meaning that the length is not fixed and is more suitable for responsive layout.
The difference between em and rem is summarized in one sentence:Em is relative to the parent element, and rem is relative to the root element.
R in rem means root, which is hard to understand.
Em
Code:
<Div> I am a parent element div <p> I am a child element p <span> I am a sun element span </span> </p> </div>
div { font-size: 40px; width: 10em; /* 400px */ height: 10em; border: solid 1px black;}p { font-size: 0.5em; /* 20px */ width: 10em; /* 200px */ height: 10em; border: solid 1px red;}span { font-size: 0.5em; width: 10em; height: 10em; border: solid 1px blue; display: block;}
The result is as follows:
Consolidation quiz: Can you tell the font-size and width of Sun element span?
Answer: I guess you will say 10px, 100px, haha. Actually, the logic is correct, but if you are a chrome browser, I cannot tell you that it should be 12px and 120px.Because chrome sets the minimum
The font size is 12 PX, indicating that the font size smaller than 12 PX will be 12px by default,Of course, this environment can be solved by css3, which is not mentioned here.
Chrome's default font size is 12px, that is, 1em defaults to 12px. If the parent element of the outermost layer directly sets font-size to 1.5em, the font size of this element is 18px (12*1.5 ).
Rem
Rem indicates that all lengths are relative to the root element. Who is the root element? <Html> element. The common practice is to set a font size for the html element, and the unit of length for other elements is rem.
Code on: (the html code is as above, but the unit of the element length in the css code has changed)
html { font-size: 10px; }div { font-size: 4rem; /* 40px */ width: 30rem; /* 300px */ height: 30rem; border: solid 1px black;}p { font-size: 2rem; /* 20px */ width: 15rem; height: 15rem; border: solid 1px red;}span { font-size: 1.5rem; width: 10rem; height: 10rem; border: solid 1px blue; display: block;}
So can you tell the specific font-size value of span?
When rem is used as the response type and the html font-size is directly changed in the media, the size of elements with rem as the unit will change accordingly, which is convenient.
I think we all have a deeper understanding of the difference between em and rem (different references ).
Summary:
The unit length used during project creation depends on your needs. I generally use the following:
Pixel (px): used for border or positioning of elements.
Em/rem: used for responsive pages, but I prefer rem, because the reference objects of different em elements are different (both are the parent element of the element), so it is not convenient for calculation, compared to rem, there is only one reference object (html element), which makes the calculation clearer.
You are welcome to talk to me in the comment area. If you think it is good, just give me a compliment. Thank you.
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
