Introduce a,

In traditional project development, we only use px, %, em these units, they can be applied to most project development, and have good compatibility.

From CSS3, browser support for units of measurement has been upgraded to another level, adding rem, VH, VW, VM and other new units of measurement.

Using these new units to develop a better responsive page, adapt to a variety of different resolutions of the terminal, including mobile devices.

Second, the unit

CSS units are classified into length units and absolute units, as shown in the following table

CSS unit
Unit of relative length Em, EX, CH, REM, VW, VH, vmin, vmax, %
Absolute unit of length Cm, mm, IN, PX, PT, PC

Today we will focus on the differences between PX, EM, REM, VH, VW and VM

1.px

Px stands for pixel, and a pixel is a small dot that appears on our monitor, and each pixel is equal in size, so pixels are units of measurement divided into units of absolute length. Some people think of px as a relative length, because the actual size of the PX display is uncertain because of the device pixel ratio on mobile devices. Px is considered absolute because the size of px has nothing to do with other attributes of the element.

2.em

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 (1em = 16px). To simplify font size conversion, we need to declare font size= 62.5% in the BODY selector in the CSS, which makes em 16px*62.5% = 10px. So 12px = 1.2em and 10px = 1em, which means just divide your original px number by 10 and replace it with em.

Features:

  • The value of em is not fixed
  • Em inherits the font size of the parent element
  • 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
  • The default font height for any browser is 16px

Here’s an example:

<div class="big"> I am 14px=1.4em<div class="small"> I am 12px=1.2em</div> </div> <style> HTML {font-size: 10px; Big {font-size: 1.4em}. Small {font-size: 1.2em} </style>Copy the code

Font size for the big element is 14px and font size for the small element is 12px

3.rem

Rem, relative to the unit, is relative only to the value of the HTML root element font-size. Similarly, if we want to simplify the conversion of font size, we can add font size: 62.5% to the root HTML element.

HTML {the font - size: 62.5%; } /* 16px*62.5%=10px */Copy the code

So 1REM =10px, 1.2REM =12px, 1.4REM =14px, 1.6REM =16px; So that vision, use, writing have been a great help

Features:

    1. Rem units have the advantages of relative and absolute size all rolled into one
    1. Unlike EM, REM is always relative to the root element, rather than using a cascading approach to calculate dimensions

4. The vh, vw

Vw is divided into 100 equal parts according to the width of the window. 100VW means full width and 50vw means half width. Vw is always the width of the window, and vh is the height of the window.

The window here is divided into several cases:

  • On the desktop, this refers to the viewable area of the browser
  • Mobile is the layout viewport

Like vw and vh, a more confusing unit is %, but percentages are loosely relative to the parent element:

  • For ordinary positioned elements, that’s what we think of as the parent element
  • For the position: absolute; Is relative to the located parent element
  • For the position: fixed; Is relative to the ViewPort

5.vm

The smaller of the width or height of the viewport. The smallest one is divided evenly into 100 VMS.

For example: browser height 900px, width 1200px, take the minimum browser height, 1 VM = 900px/100 = 9 px.

Third, summary

  • “Px” : absolute units. Pages are displayed in exact pixels
  • “Em” : relative unit. The reference point is the font size of the parent node. If font size is defined by itself, 1em is not a fixed value for the entire page
  • Rem: the relative unit, which can be understood as root EM, is calculated relative to the font size of the root node HTML
  • Vh, VW: used for page viewport layout, which is convenient and simple
  • “Vm” : For the smaller width or height of the viewport, use the same method as vH \ VM