Unidades CSS
CSS tiene varias unidades diferentes para expresar una longitud.
Muchas propiedades CSS toman valores de "longitud", como width, margin, padding, font-size, etc.
La longitud es un número seguido de una unidad de longitud, como 10px, 2em, etc.
Ejemplo:
Nota: No puede aparecer un espacio en blanco entre el número y la unidad. Sin embargo, si el valor es 0, se puede omitir la unidad.
Para algunas propiedades de CSS, se permiten longitudes negativas.
Hay dos tipos de unidades de longitud: absolutas y relativas.
Longitudes absolutas
Las unidades de longitud absoluta son fijas y una longitud expresada en cualquiera de ellas aparecerá exactamente como ese tamaño.
Las unidades de longitud absoluta no se recomiendan para usar en pantalla, porque los tamaños de pantalla varían mucho. Sin embargo, se pueden utilizar si se conoce el medio de salida, por ejemplo, para el diseño de impresión.
| Unidad | Descripción |
cm | centímetros |
mm | milímetros |
in | pulgadas (1in = 96px = 2.54cm) |
px * | píxeles ((1px = 1/96th de 1in)) |
pt | puntos (1pt = 1/72 de 1in) |
pc | picas (1pc = 12pt) |
Los píxeles (px) son relativos al dispositivo de visualización. Para dispositivos de bajo dpi, 1px es un píxel de dispositivo (punto) de la pantalla. Para impresoras y pantallas de alta resolución, 1px implica múltiples dispositivos de píxeles.
Longitudes relativas
Las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud relativa escalan mejor entre diferentes medios de representación.
| Unidad | Descripción |
em | Relativo al tamaño de fuente del elemento (2em significa 2 veces el tamaño de la fuente actual) |
ex | Relativo a la altura x de la fuente actual (rara vez se usa) |
ch | Relativo al ancho del "0" (cero) |
rem | Relativo al tamaño de fuente del elemento raíz |
vw | Relativo al 1% del ancho de la ventana gráfica |
vh | Relativo al 1% de la altura de la ventana gráfica |
vmin | Relativo al 1% de la dimensión más pequeña de la ventana gráfica |
vmax | Relativo al 1% de la dimensión más grande de la ventana gráfica |
% | Relativo al elemento padre |
Tip: Las unidades
emyremson prácticas para crear un diseño perfectamente escalable. Viewport = el tamaño de la ventana del navegador. Si la ventana gráfica tiene50cmde ancho,1vw=0,5cm.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con las unidades de longitud.
| Unidad de longitud | Chrome | Edge | Firefox | Safari | Opera |
em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
Resumen
CSS tiene varias unidades diferentes para expresar una longitud, como píxeles, centímetros, em, etc. Las unidades de longitud absoluta son fijas y una longitud expresada en cualquiera de ellas aparecerá exactamente como ese tamaño. Las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Las unidades em y rem son prácticas para crear un diseño perfectamente escalable. Las unidades de longitud son compatibles con diferentes versiones de navegadores.
Traducido con 💚 desde W3Schools.com