“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

px

Px is actually a pixel. When you use PX to set the font size, it is more stable and accurate.

Px Pixel. A unit of relative length. Pixel PX is relative to the screen resolution of the monitor.

Characteristics of px

  • IE cannot adjust font sizes that use PX as a unit;
  • Most foreign websites can be adjusted because they use EM or REM as font units;
  • Firefox can adjust PX and EM, REM, but most domestic browsers use IE kernel.

em

Em is to scale the font size according to the base.

Em is a unit of relative length. Font size relative to the text in the current object. If the current font size for inline text has not been manually set, it is relative to the browser’s default font size. (from the CSS2.0 manual)

The default font height for any browser is 16px. All untuned browsers fit: 1em=16px. So 12 px = 0.75 em, 10 px = 0.625 em. To simplify font size conversion, declare font size=62.5% in the BODY selector in CSS, This changes the em value to 16px * 62.5%=10px, so 12px=1.2em and 10px=1em, which means just divide your original px value by 10 and replace it with em.

Characteristics of the em

  • The em value is not fixed;
  • Em inherits the font size of the parent element.

So when we write CSS, we need to pay attention to two things:

  1. Font-size=62.5%;
  2. Divide your original px by 10 and replace it with em;
  3. Recalculate em values for fonts that have been enlarged. Avoid duplicate font size declarations.

Avoid 1.2 x 1.2= 1.44. For example, if the font size in #content is 1.2em, then the font size in the p tag must be 1em, not 1.2em, because this em is different from that em, which is changed to 1em=12px by inherits the height of the #content font.

REM

Rem is relative to the root element, which means we only need to determine a reference value at the root element.

Rem is a relative unit (root EM) added to CSS3, which has attracted a lot of attention.

Rem characteristics

  • Rem relative to the unit, relative to the root element;
  • The advantages of both relative and absolute size;
  • Modify the root element to scale all font sizes;
  • Avoid the cascading effect of compound font sizes layer by layer.
  • For browsers that don’t support it, the solution is simply to write an additional declaration of absolute units. These browsers ignore the font size set with REM. Example:
p {font-size:14px; font-size:.5rem; }Copy the code

Note:

The choice of font units is largely up to your project, rem is recommended if your user base is using the latest version of the browser, PX is recommended for compatibility, or both. We provide a PX, EM, REM unit conversion tool, address: pxtoem.com/