Unidades CSS
CSS tiene varias unidades diferentes para la expresión de una longitud.
Muchas de las propiedades CSS toman "length" valores, tales como el ancho, margen, relleno, tamaño de fuente, border-width, etc.
La longitud es un número seguido de una unidad de longitud, como por ejemplo 10px, 2em, etc.
Un espacio en blanco no puede aparecer entre el número y la unidad. Sin embargo, si el valor es 0, la unidad puede ser omitido.
Para algunas propiedades CSS, se permiten longitudes negativas.
Hay dos tipos de unidades de longitud: relativas y absolutas.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la unidad de longitud.
| Unidad de longitud | |||||
|---|---|---|---|---|---|
| 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 | 9,0 * | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | No soportado | 19.0 | No soportado | 20.0 |
Note: Internet Explorer 9 es compatible con Vmin con el nombre no estándar: vm.
longitudes relativas
unidades de longitud relativas especifican una longitud relativa a otra propiedad de longitud. unidades de longitud relativas escala mejor entre los diferentes medios de representación.
| Unidad | Descripción |
|---|---|
| em | En relación con el tamaño de fuente del elemento (2em means 2 times the size of the current font) Inténtelo |
| ex | Con relación a la altura de la x de la fuente actual (rarely used) Inténtelo |
| ch | Con respecto a la anchura de la "0" (zero) |
| rem | En relación al tamaño de fuente del elemento raíz |
| vw | En relación con el 1% de la anchura de la ventana * Inténtelo |
| vh | En relación con el 1% de la altura de la ventana * Inténtelo |
| vmin | En relación con el 1% de la ventana gráfica de menor dimensión * Inténtelo |
| vmax | En relación con el 1% de la ventana gráfica de mayor dimensión * Inténtelo |
| % |
Tip: El EM y REM unidades son prácticos en la creación de diseño escalable perfectamente!
* Ventana gráfica = el tamaño de la ventana del navegador. Si la ventana es de 50 cm de ancho, 1vw = 0,5 cm.
Longitudes absoluta
Las unidades de longitud absolutos son fijos y una longitud expresan en cualquiera de estos aparecerá como exactamente ese tamaño.
unidades absolutas de longitud no se recomiendan para su uso en la pantalla, debido a los tamaños de pantalla pueden ser muy variadas. Sin embargo, pueden ser utilizados si se conoce el medio de salida, como para el diseño de impresión.
| Unidad | Descripción |
|---|---|
| cm | centímetros Inténtelo |
| mm | milímetros Inténtelo |
| in | pulgadas (1in = 96px = 2.54cm) Inténtelo |
| px * | píxeles (1px = 1/96th of 1in) Inténtelo |
| pt | puntos (1pt = 1/72 of 1in) Inténtelo |
| pc | picas (1pc = 12 pt) Inténtelo |
* Píxeles (px) son en relación con el dispositivo de visualización. Para dispositivos de bajo ppp, 1 píxel es un píxel dispositivo (dot) de la pantalla. Para las impresoras y pantallas de alta resolución 1px implica múltiples píxeles de dispositivo.