1. px

px Pixel (Pixel) refers to the small squares of the image, and the pixel can be regarded as an indivisible unit or element in the entire image.

For example, the computer pixels we often hear are 1024x768, which means that the horizontal direction is 1024 pixels, and the vertical direction is 768 pixels.

px is the absolute length unit of the image , relative to the screen resolution of the monitor , and is the smallest point on the image. Once set, it cannot be changed to fit the page size.

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
 </style>

 <body>
    <div class="box"></div>
 </body>

2. em

em is a relative length unit, used in font-size is relative to the font size of the parent element; used in other properties is relative to the font size of the text in the current object. If the font size of the inline text is not set, it is generally 16px relative to the default font size of the browser.

How em units convert to pixel values

The default font-size of any browser is 16px. All unadjusted browsers conform to: 1em=16px. Then 12px=0.75em, 10px=0.625em.

The em value is equal to, the actual px value divided by the parent's font-size value.

In order to simplify the font-size conversion, it needs to be declared in the body selector in css Font-size=62.5% , which makes the em value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, that is to say, you only need to Divide the original px value by 10, and then replace it with em as the unit.

So when we write CSS, we need to pay attention to two points:

Declared in the body selector Font-size=62.5%;
Divide your original px value by 10 and replace it with em as the unit;
Recalculates the em values of those enlarged fonts. Avoid repeated declarations of font sizes.

That is to avoid the phenomenon of 1.2 * 1.2 = 1.44. For example, if you #content declare a font size of 1.2em in , then when declaring the font size of p, it can only be 1em, not 1.2em, because this em is not the other em, it #content becomes 1em due to the inherited font height= 12px.

Features:

The value of em is not fixed
em will inherit the font size of the parent element
em is a relative length unit. Relative to the font size of the text within the current object. If the current font size of the inline text is not manually set, it is relative to the default font size of the browser
The default font height of any browser is 16px

<div class="big">
    我是14px=1.4em<div class="small">我是12px=1.2em</div>
</div>

<style>
    html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
    .big{font-size: 1.4em}
    .small{font-size: 1.2em}
</style>

.bigThe element's font-sizeis 14px, while .smallthe element's font-sizeis 12px.

copy code


<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>

copy code


div {
  font-size: 40px;
  width: 10em; /* 400px，每份em为font-size的大小，10*40=400 */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px，每份em为父级div的font-size大小，0.5*40=20 */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
span {
  font-size: 0.5em;  /* 逻辑上为 10px，每份em为父级p的font-size大小，0.5*20=10 */
  width: 10em; /* 逻辑上为100px，10*10=100 */
  height: 10em;
  border: solid 1px blue;
  display: block;
}

Things get tricky when there is inheritance with em units, because each element will automatically inherit the font size of its parent. Inheritance effects can only be overridden by explicit font units, such as px, vw

Elements using em units are font-sized according to them. But that element might inherit the font size of its parent element, which in turn inherits the font size of its parent element, and so on. Therefore, an element's font size in ems may be affected by the font size of any of its parent elements.

3.rem

rem The reference is relative to the root element. We can set a reference value on the root element when using it. Compared with em, it reduces a lot of calculation workload. For example: the size is 10px, 12rem is html 120px

In this way, 1rem=10px, 1.2rem=12px, 1.4rem=14px, 1.6rem=16px in the page; so that the vision, use and writing have been greatly helped

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */

Under the root label font-sizeof 16px, 1rem=16px, 80px=5rem

<style>
        html {
            font-size: 16px;
        }
        .box1 {
            width: 5rem;
            height: 10rem;
            background-color: #ccc;
        }

        .box2 {
            width: 80px;
            height: 160px;
            background-color: #333;
        }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

Features:

The rem unit can be described as combining the advantages of relative size and absolute size
The difference from em is that rem is always relative to the root element, unlike em, which uses a cascade method to calculate the size

4.% (percentage)

In many cases, percentages are treated the same as lengths. The problem with percentages is that they are always set relative to other values. For example, if you set an element's font-size to a percentage, it will be a percentage of the font-size of the element's parent. If a percentage is used as the width value, then it will be a percentage of the width of the parent value.

1. For ordinary positioning elements, it is the parent element we understand

2. For position: absolute elements are relative to the positioned parent element

3. For position: fixed elements are relative to ViewPort (visual window)

5.vm

css3 new units, relative to viewport's width or height, whichever is smaller

The smallest of these is divided into 100 units of vm

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

The width of vm relative to the viewport. The viewport is evenly divided into 100 units

h1 {
    font-size: 8vw;
}

Another example: browser width 1200px, 1 vw = 1200px/100 = 12 px

The windows here are divided into several situations:

On the desktop, the viewable area of the browser
The mobile terminal refers to the layout viewport

Like vw, vh, a unit that is more confusing is %, but the percentage is broadly speaking relative to the parent element:

For ordinary positioning elements, it is the parent element we understand
For position: absolute; elements are relative to the positioned parent element
For position: fixed; elements are relative to ViewPort (visual window)

6.vh

h1 {
    font-size: 8vh;
}

Another example: browser height 900px, 1 vh = 900px/100 = 9 px

Summarize:

  1.vw：1vw等于视口宽度的1%。
  2.vh：1vh等于视口高度的1%。

However, the compatibility is very poor, and it is not recommended to use. Currently, px and rem are very comfortable to use.

Either use it vwor use it vh, don't mix the two, it will cause problems

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box1 {
            width: 10vw;
            height: 10vw;
            background-color: #ccc;
            margin: 5vw auto;
        }

        .box2 {
            width: 10vh;
            height: 10vh;
            background-color: pink;
            margin: 5vh auto;
        }
          
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

</body>
</html>

vw adaptation effect

vh adaptation effect

7、rpx

rpx is a unique size unit for WeChat applets that solves screen adaptation
It can be adapted according to the screen width, regardless of the size of the screen, the specified screen width is 750rpx
Set the size of elements and fonts through rpx, and the applet can automatically adapt to screens of different sizes

The difference between rpx and px:

In common web development, the most commonly used pixel unit is px
In small program development, it is recommended to use the responsive pixel unit of rpx for development

When the designer draws out the design draft, all the pictures are doubled. That is to say, if there is a box with a width and height of 200px on the design draft, it will actually be a box with a width and height of 100px when it is finally drawn on the page. box, then converted to rpx needs to be multiplied by 2, it becomes 200rpx again, which is the same as the number on the design draft, so we can keep the number unchanged and directly replace the unit px with rpx

em to px conversion

The default font height of any browser is 16px (16 pixels). All unadjusted browsers conform to: 1em=16px. Then 12px=0.75em, 10px=0.625em. In order to simplify the font-size conversion, you need to declare font-size=62.5% in the body selector in css, which makes the em value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then replace it with em as the unit.

The mobile screen is750px

then: 100vw = 750px
so 1vw equals: 1vw =750px/100vw = 7.5px
note now 1vw equals 7.5px , and ours 1rem is 16px (root element font size px by default 16 )
now calculates: 1rem = 16px/7.5px = 2.133vw
instead: 1vw = 7.5px/16px = 0.469rem

The above calculation formula can also be calculated in reverse: Similarly, the screen size of the mobile terminal is750px

How much we calculate 1px equals vw : 1px = 100/750 = 0.1333vw
show 1px=0.1333vw
Now do the calculation: 1rem= 0.1333 * 16 = 2.133vw

When should I use which unit?

There is no perfect answer to this question. In general, it's usually better to choose a relative unit rather than px so your webpage has the best chance of showing a beautifully responsive design. However, if you need to ensure that the element never resizes at any breakpoint and remains the same regardless of whether the user chooses a different default size, choose PX. Even if not ideal, the PX unit ensures consistent results.

EM is relative to the font size of the parent element, so use EM if you wish to scale the size of the element according to the size of the parent element.

REM is relative to the root (HTML) font size, so if you want the size of an element to scale based on the root size, regardless of the parent size, use REM. If you've used EM and found size issues due to lots of nested elements, REM might be a better choice.

VW can be used to create full-width elements (100%) that fill the entire width of the viewport. Of course, you can use any percentage of the viewport width to achieve other goals, such as half the width at 50%, etc.

VH can be used to create full height elements (100%) that fill the entire viewport height. Of course, you can use any percentage of the viewport height to achieve other goals, such as half the height is 50%, etc.

% is similar to VW and VH, but it is not relative to the width or height of the viewport. Instead, it is a percentage of the parent element's width or height. For example, percentage units are often used to set the width of margins.

px em rem % vw vh vm rpx unit difference in css