Table of contents
1. px pixel unit
The px unit is an absolute unit and is generally used for PC-side web development. Because it is an absolute unit, the user experience on the mobile terminal is not very good
Example:
the code
<!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>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>pc side
mobile terminal
The px unit is 200px on the PC side, and does not change with the screen size
Two, rem unit
rem It describes the font size relative to the current root element and is a relative unit. It can be transformed according to the transformation of the root element. The root element generally refers to the font-size of html, and the default value is 1rem=16px
Example:
the code
<!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>
div {
width: 5.3333rem;
height: 5.3333rem;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>pc side:
Mobile terminal:
The rem unit is a relative unit, so it can be well adapted to the mobile terminal
Three, vw and wh units
The vw and wh units refer to the length unit of the width or height of the viewport relative to the width of the viewport. 1vw is one percent of the viewport width, and 1vh is one percent of the viewport length. vw and vh change according to the size of the viewport, so they are often used on mobile phones. vw and wh cannot act on one element at the same time
Example:
the code
<!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>
div {
width: 26.6667vw;
height: 26.6667vw;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Mobile terminal:
This is an example of vw and the same is true for vh. The vw unit of the box has not changed but as the size of the mobile phone screen changes, the size of the box has also changed.