Tabla de contenido
1. px unidad de píxel
La unidad px es una unidad absoluta y generalmente se usa para el desarrollo web del lado de la PC. Por tratarse de una unidad absoluta, la experiencia de usuario en el terminal móvil no es muy buena
Ejemplo:
el código
<!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>lado de la computadora
terminal móvil
La unidad px es 200px en el lado de la PC y no cambia con el tamaño de la pantalla
Dos, unidad rem
rem Describe el tamaño de fuente relativo al elemento raíz actual y es una unidad relativa. Se puede transformar de acuerdo con la transformación del elemento raíz. El elemento raíz generalmente se refiere al tamaño de fuente de html, y el valor predeterminado es 1rem = 16px
Ejemplo:
el código
<!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>lado de la computadora:
Terminal móvil:
La unidad rem es una unidad relativa, por lo que se puede adaptar bien al terminal móvil
Unidades tres, vw y wh
Las unidades vw y wh se refieren a la unidad de longitud del ancho o la altura de la ventana gráfica en relación con la anchura de la ventana gráfica. 1vw es el uno por ciento del ancho de la ventana gráfica y 1vh es el uno por ciento de la longitud de la ventana gráfica. vw y vh cambian según el tamaño de la ventana gráfica, por lo que a menudo se usan en teléfonos móviles. vw y wh no pueden actuar sobre un elemento al mismo tiempo
Ejemplo:
el código
<!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>Terminal móvil:
Este es un ejemplo de vw y lo mismo ocurre con vh. La unidad vw de la caja no ha cambiado, pero a medida que cambia el tamaño de la pantalla del teléfono móvil, el tamaño de la caja también ha cambiado.