Unidades CSS
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
Establezca diferentes valores de longitud, usando px (píxeles):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
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.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* 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 renderizado.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to the width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Consejo: ¡Las unidades em y rem son prácticas para crear un diseño perfectamente escalable!
* Viewport = el tamaño de la ventana del navegador. Si la ventana gráfica tiene 50 cm de ancho, 1vw = 0,5 cm.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la unidad de longitud.
| Length Unit | |||||
|---|---|---|---|---|---|
| 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 |