What is REM?

Rem Full name (font size of the root Element) Unit of HTML size relative to the root node

It was first discussed on April 1, 2002

compatibility2

As you can see, Android compatibility is pretty good

Why rem

Browser age

In PC development, the unit often used is PX; Px can be displayed on any PC with the same size. For text fonts, the same 12px font will display the same size in Google and Internet Explorer. This is in line with expectations.

Mobile era

The era is developing, and now it has entered the era of mobile terminal. Since the mobile terminal has a small screen, it hopes to display more information on the small screen, which requires that the information displayed on the large screen and the small screen is dynamic and self-adaptive. It is best to display the same effect on any size screen; For example, a 12px font can be displayed 12px on a 375px screen, while a 750px font can be displayed slightly larger, such as 24px;

In order to dynamically adapt to various screens on mobile terminals, various adaptation schemes have been spawned, such as mate query; Using the mate tag to adapt different CSS on the 375 and 750 screens is one of them. However, with the rapid development of mobile terminals, a large number of mobile terminals with different screens are put into the market. With more and more screens, it is more and more difficult to use mate tag adaptation. Faced with such a complex mobile terminal adaptation, rem scheme is proposed

Why not use percentages? The problem with percentage is that if you use percentage as the width value, it will be percentage 3 of the parent width

Rem solves mobile adaptation

Because REM is the unit of font size relative to the root node, the HTML;

In May 2011, Jonathan Snook published REM Font Size adjustment article 4, proposing the idea of using REM as the text unit to dynamically adjust text size

Rem is a relative unit, sized relative to the root element; That is to say, if the root node size is changed, all sizes using REM units are also changed dynamically.

Then, according to the width of different screens, dynamically modify the HTML font size at the same ratio, and replace the PX in the style with REM, so that it can be changed according to the font size of the root element, so as to achieve the effect of all screens basically all the time experience?

Font-size: 100px; Set the body width to 1rem; Width :100px;

Font size for the HTML is set to 100px; Very convenient px to REM calculation, can the development of HTML font size set to 100px?

No, because the width of the mobile screen is not fixed, but the width of the UI is fixed, let’s say the UI is 750px wide; Hope to use 10REM during the development process can display 750px visual effect on the mobile terminal of any width; That is to say,

  • Font size should be set to 75px on mobile pages with 750px screen width.
  • Font size should be set to 37.5px on a mobile page with a screen width of 375px.
  • Font size should be set to 41.4px on mobile pages with a screen width of 414px.

This is the idea of dynamically changing the font size of your HTML at the same scale depending on the width of the screen so that 10rem on any screen will produce a visual effect of 750px;

Why use the px to REM loader

Convenient development

Font-size :36px; If the development needs to set a 22px text, calculate 22/36 ≈ 0.6111 rem; Every time I write px I have to calculate px over REM, right? Development efficiency is extremely low; Front-end development is also software development engineer ah, software development engineer is not to let the program instead of artificial? Write code to automatically convert PX to REM; During redevelopment, set the font 22px to 22px and let the program handle 22px ≈ 0.622rem

Convenient maintenance

Font-size :36px; Now I need to display a 22px text, 36/22 = 0.611; *0.611 = 21.996 *0.611 = 21.996 *0.611 = 21.996; And then change px to REM; Maintaining a CSS is cumbersome. Just leave it to the code to do repetitive things that are too tedious

conclusion

  • Rem was used because PX could not adapt to the changing mobile screen
  • Rem is a relative unit, relative to the root node font size; By dynamically setting the FONT size of HTML can achieve a variety of screen display of the basic always effect
  • Rem has good compatibility
  • The community has a lot of plugin support for PX to REM

reference

Rem in CSS: Understand and use REM units

How different is VW from REM in real development?

Rem for the first time

Why not use percentage _MDN

Rem adaptation principle

Flexible REM layout for mobile terminal is fully explained