Las unidades de medida de CSS utilizadas son las siguientes. Medir básicamente significa encontrar un número que muestre la cantidad de algo que queremos averiguar. CSS tiene muchas unidades de medida diferentes para expresar la longitud de varios contenedores HTML. Varias propiedades de CSS como ancho, relleno, tamaño de fuente, margen, etc. tienen un número y una unidad como valor.
Las unidades de medida se pueden clasificar además en dos tipos según su naturaleza.
- Unidades de medida absolutas
- Unidades de medida relativas
Unidades absolutas: las unidades absolutas, como sugiere el nombre, son de naturaleza fija. No son relativos a nada más y se consideran del mismo tamaño. Para uso en pantalla, no se recomiendan estas unidades de medida debido a la variación del tamaño de la pantalla. Estas unidades se recomiendan cuando se conoce el medio de salida, como para imprimir.
Ejemplos:
- px: el píxel es una unidad pequeña pero aún visible y está relacionada con el dispositivo de visualización.
- cm: Centímetros, 1cm=37.8px
- mm: milímetros, es una unidad más pequeña en comparación con el cm, 1 mm = 1/10 de 1 cm.
- in: pulgadas, es una unidad grande en comparación con los píxeles, 1in=96px
- pc: pica es una unidad tipográfica, 1pc=1/6th de 1in
- pt: Puntos es la unidad de medida más pequeña, 1pt=1/72 de 1in
Unidades relativas: como sugiere su nombre, son relativas a otra cosa. Podría ser relativo al tamaño de la fuente del elemento raíz o del elemento principal o al tamaño de la ventana gráfica. Los usuarios pueden escalar mejor entre diferentes medios de renderizado usando unidades relativas.
Ejemplos:
- rem: esta unidad es relativa al tamaño de fuente del elemento raíz.
- em: Esta unidad es relativa al tamaño de fuente del elemento mismo. Por ejemplo, 3em significa que el nuevo tamaño será 3 veces el tamaño de la fuente actual.
- %: Esto denota un valor porcentual, define el tamaño de un elemento en relación con el elemento de su padre.
- ej.: esta unidad es relativa a la altura x de la fuente en uso.
- vh: la altura de la ventana gráfica indica que la altura del elemento es el 1% de la altura de la ventana gráfica.
- vw: el ancho de la ventana gráfica indica que el ancho del elemento es el 1% del ancho de la ventana gráfica.
- vmin: Esto denota el tamaño relativo al 1% de la dimensión más pequeña de la ventana gráfica.
- vmax: Esto denota el tamaño relativo al 1% de la dimensión más grande de la ventana gráfica.
Ejemplo 1: El siguiente ejemplo muestra la comparación entre px y porcentaje. El ejemplo muestra claramente la diferencia entre px y porcentaje. px es una unidad absoluta mientras que el porcentaje es una unidad relativa. px no cambiará su tamaño independientemente del tamaño del contenedor, mientras que % cambiará su tamaño dinámicamente según el ancho del contenedor.
HTML
<!DOCTYPE html> <html> <body> <div class="box pixel-units"> 100px </div> <div class="box percentage-units"> 50% </div> <div class="parent"> <div class="box pixel-units"> 100px </div> <div class="box percentage-units"> 50% </div> </div> </body> </html>
CSS
body{
font-family: Arial;
}
.box{
background-color: dodgerblue;
margin-bottom: 10px;
}
.pixel-units{
width: 100px;
}
.percentage-units{
width: 50%;
}
.parent{
width: 150px;
border: 2px solid black;
padding: 5px;
}
Producción:
Ejemplo 2: El siguiente ejemplo muestra la comparación entre vw, vh y porcentajes. Otro tipo de unidad relativa es vw y vh. Mientras que los porcentajes son relativos al tamaño del contenedor principal, vw y vh son relativos al tamaño de la pantalla. 1vw es el ancho del 1% del tamaño de la pantalla, mientras que 1vh es el alto del 1% del tamaño de la pantalla. El siguiente ejemplo ilustrará la diferencia entre vw, vh y porcentajes.
HTML
<!DOCTYPE html> <html> <body> <div class="box percentage-units"> 50% </div> <div class="box vw-unit"> 50vw </div> <div class="box vh-unit"> 10vh </div> <div class="parent"> <div class=" box percentage-units"> 50% </div> <div class="box vw-unit"> 50vw </div> <div class="box vh-unit"> 10vh </div> </div> </body> </html>
CSS
body{
font-family: Arial;
}
.box{
background-color: dodgerblue;
margin-bottom: 10px;
}
.percentage-units{
width: 50%;
}
.vw-unit{
width: 50vw;
}
.vh-unit{
height: 10vh;
}
.parent{
width: 150px;
border: 2px solid black;
padding: 5px;
}
Producción:
Ejemplo 3: El siguiente ejemplo muestra la comparación entre em y rem.
em y rem son unidades relativas aplicadas a los tamaños de fuente. Estas unidades están definidas por los tamaños de fuente especificados por nosotros. La principal diferencia entre em y rem es que em es relativo al elemento raíz (<html>), mientras que em es relativo al tamaño de fuente especificado en el contenedor principal. El siguiente ejemplo debería ayudarlo a comprender las diferencias entre estas unidades.
Nota: El tamaño de fuente predeterminado del elemento raíz es 16 px. Se puede sobrescribir cambiando el valor del tamaño de fuente en HTML.
HTML
<!DOCTYPE html> <html> <body> <!--children of root element --> <div class="one-rem">1rem</div> <div class="one-em">1em</div> <hr> <!--children of parent div element --> <div class="parent"> <div class="one-rem">1rem</div> <div class="one-em">1em</div> </div> </body> </html>
CSS
html{
font-size: 20px;/*Default font size of 16px*/
}
.one-rem{
font-size: 1rem;
}
.one-em{
font-size: 1em;
}
.parent{
font-size: 30px;
border: 2px solid black;
}
Producción:
En el primer caso, em y rem tienen el mismo tamaño de fuente porque son hijos del mismo elemento (elemento raíz). Sin embargo, en el segundo caso, el tamaño de fuente en el contenedor principal se define como 30 px, lo que explica la diferencia en el tamaño de fuente entre em y rem.
Publicación traducida automáticamente
Artículo escrito por adhetyanarayan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA