En este artículo, veremos cómo configurar las unidades CSS de diferentes maneras.
- %: la unidad % se utiliza para establecer el tamaño de fuente en relación con el tamaño de fuente actual.
- em – Se utiliza para establecer el tamaño relativo. Es relativo al tamaño de fuente del elemento.
Nota: Aquí 2em significa 2 veces el tamaño de la fuente actual. - rem: relativo al tamaño de fuente base del navegador.
- px: define el tamaño de fuente en términos de píxeles. (96 px = 1 pulgada)
- vh: relativo al 1 % de la altura de la ventana gráfica.
- vw – Relativo al 1% del ancho de la ventana gráfica.
Ejemplo 1: La unidad de píxel es una unidad absoluta para establecer el ancho, es decir, siempre es la misma. Una unidad de porcentaje se basa en una unidad relativa, es decir, se basa en su tamaño principal.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background: red;
border: 1px solid black;
margin: 10px;
}
.parent {
background: white;
border: 1px solid black;
}
.fifty-percent {
width: 50%;
}
.one-hundred {
width: 100px;
}
.parent {
width: 250px;
;
}
</style>
</head>
<body>
<h3>Output-1 </h3>
<div class="box fifty-percent">50%</div>
<div class="box one-hundred">100px</div>
<hr>
<h3>Output-2 </h3>
<div class="parent">
<div class="box fifty-percent">50%</div>
<div class="box one-hundred">100px</div>
</div>
</body>
</html>
Producción :
Ejemplo 2: Otro tipo de ancho relativo se llama ancho de vista (vw) y alto de vista (vh). 1vw equivale al uno por ciento del tamaño total de la pantalla, por lo que 100 vw ocuparía todo el ancho y 50vw obviamente ocuparía la mitad del ancho, pero lo importante de vw frente a los porcentajes es que las unidades de ventana gráfica se basan en el tamaño completo de la pantalla, mientras que los rectángulos son relativos. a su padre
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.box {
background: red;
border: 1px solid black;
margin: 10px;
}
.parent {
background: white;
border: 1px solid black;
}
.fifty-percent {
width: 50%;
}
.fifty-vw {
width: 50vw;
}
.twenty-five-vh {
height: 25vh;
}
.parent {
width: 100px;
;
}
</style>
</head>
<body>
<h3>Output-1 </h3>
<div class="box fifty-percent">50%</div>
<div class="box fifty-vw">50vw</div>
<div class="box twenty-five-vh">25vh</div>
<hr>
<h3>Output-2 </h3>
<div class="parent">
<div class="box fifty-percent">50%</div>
<div class="box fifty-vw">50vw</div>
<div class="box twenty-five-vh">25vh</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: tanto las unidades REM como las unidades EM son relativas, pero en lugar de ser relativas a las cosas que las rodean, como el ancho de sus padres o la altura de los padres, en realidad son relativas al tamaño de fuente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parent {
background: white;
border: 1px solid black;
}
.one-rem {
font-size: 1rem;
}
.one-em {
font-size: 1em;
}
.two-rem {
font-size: 2rem;
}
.two-em {
font-size: 2em;
}
.parent {
font-size: 30px;
}
</style>
</head>
<body>
<h3>Output-1</h3>
<div class="one-rem">1rem</div>
<div class="one-em">1em</div>
<div class="two-rem">2rem</div>
<div class="two-em">2em</div>
<hr>
<h3>Output-2</h3>
<div class="parent">
<div class="one-rem">1rem</div>
<div class="one-em">1em</div>
<div class="two-rem">2rem</div>
<div class="two-em">2em</div>
</div>
</body>
</html>
Producción:
