This is an advanced topic article that dives into px, em and rem, I hope so.
Fixed-width pages and adaptive-width pages
To clarify the difference between px, em and rem, we have to start from this topic.
In fact, I couldn't understand the fixed width of the page at first.
The following JD.com page is displayed on a screen with a resolution of 1080*1920.
The following JD.com page is displayed on a 14-inch notebook with a resolution of 1366*728.
When I know that the width of the jd website is the same under different resolutions, I feel very strange. Shouldn't it be adapted? But I have nothing to say when I see that the big factories are doing it like this.
If you have done Android development, you will know that Android applications must be adapted to the screen, and if they do not match, the display will be abnormal. In fact, no one is right or wrong, it's just a trade-off. It's just that different platforms handle it differently, and there are many reasons for this difference. Such as the reason of the operating system. Android's native GUI system is a very old system. The bottom layer of this GUI system requires you to do adaptation, so you have to adapt.
What I want to say here is whether the adaptation problem is mandatory. For BS applications. If you don’t fit it, there will be no problem. It’s just that the proportion becomes smaller and smaller. The page layout will not change. Here we only discuss the display on the PC monitor, not the display on the mobile phone. And the question that needs to be considered is whether the width is set to 800px or 1024px, and the question of whether the width is set to 1024px or 1280px will be discussed later. These are not a problem as long as you zoom the browser.
If you want to discuss the adaptation and display of PC pages on the mobile terminal, that is another matter entirely. It is no longer a question of adaptation or not, but a question of whether to develop a mobile version.
Another reason is the way the page designer thinks. Fixed width is a natural thing for them. Considering widening is difficult to understand and design.
In fact, another important reason is the issue of income. If you must be adaptive, you have to consider a lot of things, such as the size of the picture is difficult to control. It is not appropriate to display a small image on a large screen, or a large image on a small screen. You said that this is not a problem. I can request pictures of different sizes according to the ratio. This will actually put a lot of burden on the server, and the situation will become complicated. In the end, you may find that the gain is not worth the loss. Might as well write it as a fixed width.
Absolute and Relative Units
If you want to develop a page with a fixed width, then the absolute unit px is the best choice. If you want to develop pages with adaptive width, then you need to consider relative units, such as em and rem.
We are all too familiar with the pixel unit px. It should be noted that the pixel px of website development is still different from the physical pixel. CSS pixels are not strictly equal to the pixels of the display, especially on high-definition screens (retina screens). Under some extremely high-resolution screens (such as Apple's 4k monitor), the operating system will force all applications to be enlarged, because software with a fixed size that is not enlarged will look very small. But for websites, we don't need to care about this, because the structure ratio will not change.
Em and rem are adaptive relative to text. is a relative unit. The advantage of relative units is that they can be adaptive. The disadvantage is that it will complicate the design.
origin of the name em
Yes, at first I was very curious about which word em is an abbreviation, and the official document did not say it. After checking for a long time, the summary is as follows:
1. em is not an abbreviation.
2. em comes from the printing industry. Printing needs to consider the size of letters, and the size of M is almost a square. Therefore, other letters are designed with reference to the M letter as a standard. The English pronunciation (phonetic symbol) of M is em.
The story makes perfect sense, and ems do correlate to letter size in CSS. Whether the story is true is irrelevant.
https://www.w3cplus.com/css/rip-rem-viva-css-reference-pixel.html
The concept and use of em
In CSS, 1em is equal to the font size of the current element. If the font size is not set, the default font size is 16px, and 1em is equal to 16px by default.
#box {
display: inline-block;
padding: 1em;
}
After modifying the font size, the value of 1em also changed. Now 1em=20px.
#box {
display: inline-block;
font-size: 20px;
padding: 1em;
}
CSS text drawing
Many people think that the text is very simple, can it be displayed? In fact, it is not the case, let's see the effect below.
The figure below has so many features that you may overlook or misunderstand them.
1. There is a gap between the left and right sides of the text and the edge of the div. If your text is small, you may not see it and mistake it for clinging.
2. The letter g at the bottom appears to be close to the periphery of the div. But it’s not. If you set the font to be very large, you can see that there is still a gap with the edge of the div. Just a small gap.
3. Although the letter f is prominent, it is obvious that it is still far from the top edge of the div.
<div class="above">agofe</div>
.above{
display:inline;
background-color: lightblue;
font-size:500px
}
Moreover, these gaps cannot be eliminated, because these gaps are an integral part of the text.
I drew a picture to explain why this is.
From a height perspective, CSS text drawing may not have the top and bottom lines below. But there are two lines of ascent and descent corresponding to the bottom and top of the text. leading represents the text baseline.
After reading this picture, there is no need to explain the phenomenon above.
The relative meaning of em and calculation problems
em will inherit the font-size from the parent element as the base value.
<div id="box">
<div class="outer">
outer
<div class="inner">inner</div>
</div>
</div>
.outer{
height: 1em;
background-color: lightgreen;
width: 200px;
}
.inner{
font-size: 1.2em;
height: 1em;
background-color: lightblue;
width: 200px;
}
outer inherits the default size of 16px from body. The same height is set to 1em, and the height of the inner is significantly larger than the height of the outer. This is because .inner sets the font-size, inner height=outer.height*1.2*inner.height.
Em's inheritance characteristics or existing problems
em will inherit the font-size from the parent element as the base value. This counts as a feature, but at the same time it's a very serious problem.
The above code is fine if the purpose itself is to enlarge the font. Problems can arise if there are multiple levels of nesting.
For example I have a multilevel list. I want to set the text size of ul to 1.2em. My original intention is that the size of all ul is 1.2em, which is 1.2 16px. But then there is a problem. The font size of ul has become progressively enlarged. My original intention was to have the same size, which is caused by inheritance. The text size of the first ul is 16px 1.2. The second ul text size is (16px*1.2)*1.2. It also forms the effect of step-by-step amplification.
If this problem does not work, CSS provides us with another unit rem, rem means root rem, that is, according to the size of the html tag as the standard, the default is 16px. In this way, there is no inheritance phenomenon, and the font-size of the root element is agreed to be the standard. It can solve this multi-level nesting problem.
ul{
font-size: 1.2em;
}
<div>
<ul>
<li>Top Level</li>
<ul>
<li>Second Level</li>
<ul>
<li>Third Level</li>
</ul>
</ul>
</ul>
</div>
Use rem:
so that it will not be enlarged step by step. Of course, if you just want to zoom in step by step, then using em may not be a problem, but a skill.
ul{
font-size: 1.2rem;
}
Set font size and browser zoom
The browser can zoom the webpage as a whole. ctrl+ or ctrl-. This approach can only scale a webpage separately, and it is temporary. Not sure why browsers don't support auto scaling. Another way is through em. If the size is dynamically changed according to the set font size, this method is permanent. The disadvantage is that not the whole will be affected, for example, pictures must use px.
Stop pixel thinking, not a good trick
The default text size of html is 16px, and it is not very convenient to use em to calculate. For example, if I want a text of 20px, then I need to calculate 20/16=1.25em. Then someone may think of a way to request, which is to set the font-size of html to 0.625em, because 0.625em*16px=10px. This way, if I were to calculate the em value of, say, 18px, I could directly conclude that it was 1.8em.
But this way is a typical pixel thinking. It doesn’t mean that you can’t use pixels, but that when you use em, you have to use relative units of thinking instead of clinging to pixels. Most importantly, this approach has obvious disadvantages.
1. The default 10px is relatively small. When setting the font, you may have to reset the font, which is very troublesome.
2. The essence of this approach is pixel thinking. When using em, I still think about px. The body is in Cao Ying, the heart is in Han.
There is also an improved trick:
when using rem, it can be calculated quickly. When the size is not written, the default size is also 16px. It's just an old problem, I still use em, thinking about pixels.
html{
font-size:0.625em
}
body{
font-size:16px
}
em and responsive design
Many years ago, when bootstrap was very popular, the concept of responsiveness was also very popular, and the underlying principle of UI frameworks like bootstrap was realized by using the relative unit of em, combined with @media to achieve different width display Different em sizes.
The implemented logic is similar to the following.
:root {
font-size: 0.75em;
}
@media (min-width: 800px) {
:root {
font-size: 1em;
}
}
@media (min-width: 1200px) {
:root {
font-size: 1.25em;
}
}
responsive positioning
Responsive layouts are great, but be aware of responsive positioning.
Responsive is essentially a website, not an app. Responsive is just a mobile display effect. If you want to make a mobile layout, it is no longer in the scope of responsive, but a web version of the app.
And domestic may not be able to write a web version of the APP, but to do it with a small program. Because users have actually adapted to the operation of the mobile terminal, they are not used to the responsive hidden menu.
However, under the premise of saving costs, responsiveness can also be considered as an App. After all, it is necessary to modify a lot of things when writing a mobile terminal.
Summarize
Back to the title, if you have to say what is the difference between px, em, and rem, the article has already analyzed them all.
1.px is a fixed unit, and em and rem are relative units.
2.em and rem can realize responsive functions, which are more flexible and complex. px is relatively simpler.
3.em, rem and font size are related.