What is the difference between PX, EM, REM, %, VW, WH, VM and so on?

1. Background

In the traditional project development, we only use px, %, EM these several units, it can be applied to most project development, and has a good compatibility. But you know what? Since CSS3, the browser’s support for logical units has been promoted to another level, with the addition of rem, VH, VW, VM and other new units of length. We can use these new units to develop more responsive pages, and then cover a variety of terminals with different resolutions, including mobile devices. Now let’s see how these units of length differ. \

2. Knowledge analysis

1, px

  • Px is short for “pixel”.Px is the smallest point in an imageA bitmap is made up of thousands of such dots. For example, the commonly heard computer pixel is 1024×768, which means 1024 pixels in horizontal direction and 768 pixels in vertical direction.
  • Compatibility:

2, em

  • The reference is the font-size of the parent element, which has the characteristic of inheritance. If font size is defined by itself (the browser default is 16px), 1em is not a fixed value for the entire page.

  • Compatibility:

3, rem

  • Css3’s new unit, relative to the root HTML element, does not rely on the font size of the parent element like EM, causing confusion.

  • Compatibility:

4, %

  • Generally speaking, relative to the parent element, but not exactly.

  • 1, for ordinary positioning element is our understanding of the parent element

  • 2, for position: Absolute; The element of is relative to the located parent element

  • 3. For position: fixed; Is relative to the ViewPort (visible window)

  • Compatibility:

5, vw

  • Css3 new unit, the abbreviation of viewpoint width, window width, 1VW is equal to the window width of 1%.

  • For example: browser width 1200px, 1 vw = 1200px/100 = 12px. \

  • Compatibility:

6, the vh

  • Css3 new unit, viewpoint height abbreviation, window height, 1Vh is equal to the window height 1%.

  • For example: browser height 900px, 1 vh = 900px/100 = 9 px.

  • Compatibility:

7, vm,

  • Css3 new unit, the smaller one relative to viewport width or height. The smallest of these is divided into 100 VMS
  • For example: the browser height is 900px and the width is 1200px. Take the minimum browser height, 1 VM = 900px/100 = 9 px.
  • Because nowThe VM compatibility is poorI’m not going to show you.

3. Frequently Asked Questions

Vh VW VM Application scenarios?

4. Solutions

Vh vw is the innerWidth of the scrollbar that is not included in the page. % contains the scrollbar’s innerWidth.

In general, % is sufficient for most adaptive designs. You can use height: 100vh to make a full-screen adaptive, no scrollbars. With VW, the size of vH depends only on the size of the window, so it’s a good unit for developing applications for multiple screen devices.

5. Actual coding

www.jnshu.com/login/1/813…

6. Expand your thinking

What are other units of length in CSS? T :point, about 1/72 “PC: PICa, about 6pt, 1/6” 1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px\