This is the 22nd day of my participation in the August Wen Challenge.More challenges in August

Related articles:

  • 1. Understand CSS thoroughly
  • 2. Understand CSS thoroughly
  • 1. Understand CSS thoroughly
  • 1. Understand CSS thoroughly
  • 1. Understand CSS thoroughly

Can you tell us the differences and connections between EM, PX, REM, VH and VW?

Introduce a,

In the traditional project development, we only use px, %, EM these units, it can be applied to most of the project development, and has a good compatibility.

Starting with CSS3, the browser added 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

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

Here we mainly talk about PX, EM, REM, VH and VW

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

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 is not 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

For example

<div class="big">I am 14 px = 1.4 rem<div class="small">I am a 12 px = 1.2 rem</div>
</div>
Copy the code

The style for

<style>
    html {font-size: 10px;  } 16px*62.5%=10px */  
    .big{font-size: 1.4 rem}
    .small{font-size: 1.2 rem}
</style>
Copy the code

The font size for the. Big element is 14px, while the font size for the. Small element is 12px

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 {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:

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

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

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: relative unit, can be understood as root EM, relative to the font size of the root node HTML

Vh and VW: mainly used for page viewport size layout, which is more convenient and simple in page layout