In CSS, the most commonly used unit length is PX, EM, and REM. The differences between these three are:

  1. Px is a fixed pixel that, once set, cannot be changed to fit the page size.
  2. Em and REM are more flexible than PX because they are units of relative length, meaning that the length is not fixed and is more suitable for responsive layouts.
  3. Em sets the font size relative to its parent element, usually with<body>“font-size”As the benchmark. The problem is that for any element setting, you might need to know the size of its parent element. And Rem is relative to the root element<html>, which means that we only need to determine a reference value at the root element.

Summary: The difference between EM and REM is summarized in one sentence: EM relative to parent element, REM relative to root element.

A, em

The em font size of the child element is relative to the font size of the parent element

(2) the element’s width/height/padding/margin with em words is relative to the element’s font size

<div>Parent div<p>Child elements p<span>Sun elements span</span>
    </p>
</div>
Copy the code
 div {
        font-size: 40px;
     /* i.e. 1em = 40px = font-size */
        width: 7.5 em; /* 300px */
        height: 7.5 em;
        border: solid 2px black;
    }
 p {
        font-size: 0.5 em; /* 20px */
     /* the em is based on p's father's font size */
        width: 7.5 em; /* 150px */
        height: 7.5 em;
        border: solid 2px blue ;
        color: blue;
    }span {
        font-size: 0.5 em;
        width: 7em;
        height: 6em;
        border: solid 1px red;
        display: block;
        color: red;
    }
Copy the code

The result is shown below:

Second, the rem

Rem is all length relative to the root element, who is the root element? < HTML > element. The usual practice is to give HTML elements a font size, and then the length of other elements is rem.

The code:

<div>Parent div<p>Child elements p<span>Sun elements span</span>
    </p>
</div>
Copy the code
   html {
        font-size: 10px;
    }
    div {
        font-size: 4rem; /* 40px */
        width: 20rem;  /* 200px */
        height: 20rem;
        border: solid 2px black;
    }
    p {
        font-size: 2rem; /* 20px */
        width: 10rem;
        height: 10rem;
        border: solid 1px blue;
        color:blue ;
    }
    span {
        font-size: 1.5 rem;
        width: 7rem;
        height: 6rem;
        border: solid 2px red;
        display: block;
        color: red;
    }
Copy the code

The result is shown below:

Conclusion a

What unit length you use for a project depends on your needs, and I usually go like this:

1. Pixel (PX) : used for the border or positioning of elements.

2, EM/REM: used for responsive pages, but I prefer REM, because EM elements have different reference points (all parent elements of the element), so it is not convenient to calculate, while REM has only one reference point (HTML elements), so it is clearer to calculate.

Conclusion two

Rem and EM units are pixel values calculated by the browser based on the font size in your design.

Em units are based on the font size of the elements that use them.

Rem units are based on the font size of HTML elements.

4. Em units may be affected by the font size of any inherited parent element

Rem units inherit font sizes from browser font Settings.

Use em units based on component font size, not root element font size.

7. Use REM when you don’t need em units and need to scale according to the browser’s font size.

8. Use REM units unless you are sure you need EM units, including font sizes.

9. Rem units are used in media queries

10. Do not use EM or REM in multi-column layouts. Use % instead.

11. Do not use EM or REM, as scaling will inevitably break layout elements.

Note that:

Reset sets the initial size of the HTML font to 50px in case js is disabled or not loaded or executed incorrectly.

The body font size should be set to 16px. This is so that the body font size does not inherit the parent HTML element’s 50px, but uses the default 16px

Px versus REM?

For those that only need to be adapted to a few mobile devices and the resolution has little impact on the page, use PX.

For the need to adapt to a variety of mobile devices, use REM, for example, only need to adapt to iPhone and iPad and other devices with relatively large resolution differences.

rpx

RPX is a unit of size for wechat applet to solve adaptive screen size. Wechat mini program specifies a screen width of 750rpx.

Whether on iPhone6 or other models, the screen width is 750rpx. Take iPhone6 for example, the screen width is 375px. After dividing it into 750rpx, 1rpx = 0.5px.

Wechat applet also supports REM size units. Rem specifies a screen width of 20rem, so 1rem = (750/20) RPX = 37.5rpx