Unidades de CSS
- Página anterior Diseño de sitio web de CSS
- Página siguiente Especifidad de CSS
Unidades de CSS
CSS tiene varias unidades de longitud.
Muchos atributos de CSS aceptan valores de "longitud", como ancho,margen,padding,font-size y otros.
La longitud es un número seguido de una unidad de longitud, como 10px,2em y otros.
ejemplo
Configurar diferentes valores de longitud usando px (píxeles):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
No debe haber espacios entre el número y la unidad. Sin embargo, si el valor es 0, se puede omitir la unidad.
Para ciertos atributos de CSS, se permite usar longitudes negativas.
Hay dos tipos de unidades de longitud:unidades absolutasyunidades relativas.
longitud absoluta
Las unidades de longitud absolutas son fijas; cualquier longitud expresada en una longitud absoluta se mostrará exactamente de ese tamaño.
No se recomienda usar unidades de longitud absolutas en la pantalla, ya que el tamaño de la pantalla varía mucho. Sin embargo, si se conoce el medio de salida, se pueden usar, por ejemplo, para el diseño de impresión (print layout).
| unidad | descripción | TIY |
|---|---|---|
| cm | centímetro | Prueba |
| mm | milímetro | Prueba |
| in | pulgada (1in = 96px = 2.54 cm) | Prueba |
| px * | píxel (1px = 1/96 de 1 pulgada) | Prueba |
| pt | punto (1pt = 1/72 de 1 pulgada) | Prueba |
| pc | pica (1pc = 12 pt) | Prueba |
* píxeles (px) son relativos al dispositivo de visualización. Para dispositivos de baja dpi, 1px es un píxel de dispositivo (punto) en la pantalla. Para impresoras y pantallas de alta resolución, 1px representa varios píxeles de dispositivo.
longitud relativa
La unidad de longitud relativa define la longitud en relación con otra propiedad de longitud. Las unidades de longitud relativa se escalan mejor entre diferentes medios de renderización.
| unidad | descripción | TIY |
|---|---|---|
| em | tamaño de fuente del elemento (font-size) (2em representa el doble del tamaño actual de la fuente) | Prueba |
| ex | x-height del tipo de letra actual (muy raramente utilizado) | Prueba |
| ch | ancho relativamente a "0" (cero) | Prueba |
| rem | tamaño de fuente del elemento raíz (font-size) | Prueba |
| vw | 1% del ancho del viewport* | Prueba |
| vh | 1% de la altura del viewport* | Prueba |
| vmin | 1% del tamaño del viewport* relativamente pequeño | Prueba |
| vmax | Relativo al tamaño más grande del viewport * 1% | Prueba |
| % | Relativo al elemento padre | Prueba |
Consejo:Las unidades em y rem se pueden usar para crear diseños perfectamente escalables!
* Viewport (Viewport) = tamaño de la ventana del navegador. Si el viewport es de 50 cm de ancho, entonces 1vw = 0.5 cm.
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la unidad de longitud.
| Unidades 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 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
- Página anterior Diseño de sitio web de CSS
- Página siguiente Especifidad de CSS
