Differences of PX, EM, REM,%, VW, VH, VM

Time:2019-11-8

1.px

pxPixel is the basic unit that we often use now. For example, the computer pixel we often hear is 1024×768, which means that there are 1024 pixels in the horizontal direction and 768 pixels in the vertical direction.

2.em

emReference is the parent element’sfont-size, the default font size is 16px, so 1em is not a fixed value because it inherits the font size of the parent element

3.rem

remThe reference object is relative to the root element. When we use it, we can set a reference value in the root element. Compared with EM, it can reduce a lot of calculation work. For example:html10px, 12rem is 120px

4.%

%Is the ratio set relative to the size of the parent element,position:absolute;The element of is relative to the positioned parent element,position:fixed;The element of is a relative visible window

5.vm

VM width relative to the viewport. The viewport is divided equally into 100 units

h1 {
    font-size: 8vw;
}

Another example: Browser width 1200px, 1 VW = 1200px / 100 = 12 PX

6.vh

VM width relative to the viewport. The viewport is divided equally into 100 units

h1 {
    font-size: 8vh;
}

Another example: Browser height 900px, 1 VH = 900px / 100 = 9 PX


Conclusion:

VW: 1vw is equal to 1% of the viewport width.
  2. VH: 1vh is equal to 1% of the height of the viewport.

However, it is not recommended to use because of its poor compatibility. Currently, PX and rem are very comfortable to use,

Amway’s website for converting units helps to better understand the multiple relationship between the commonly used PX / EM / REM:
Http://pxtorem.com/px conversion rem

Http://pxtoem.com/px conversion em