Unidades
Muchas de las propiedades CSS como width, margin, padding, font-sizeetc. tomar longitud. CSS tiene una forma de expresar la longitud en varias unidades. La longitud es una combinación de un número y una unidad sin espacios en blanco. Por ejemplo 5px, 0.9emetc.
Longitud
Unidades de longitud comunes
CSS utiliza varias unidades para expresar la longitud. Los más antiguos, compatibles con todos los navegadores, son:
- rem - “r” significa “root”: “root em” -, que es igual al tamaño de fuente fijado al elemento raíz (casi siempre
). - vh y vw : muchas técnicas de diseño web receptivo se basan en gran medida en reglas de porcentaje. Sin embargo, las medidas de porcentaje de CSS no siempre son la mejor solución para todos los problemas. La medida vh es igual a 1/100 de la altura de la ventana gráfica. Entonces, por ejemplo, si la altura del navegador es 800px, 1vh es igual a 8px y, de manera similar, si el ancho de la ventana gráfica es 650px, 1vw equivale a 6.5px.
- vmin y vmax : estas unidades están relacionadas con el valor máximo o mínimo de vh y vw . Por ejemplo, si el navegador se configuró en 1200px de ancho y la altura de 600px, 1vmin sería 6px y 1vmax sería 12px. Sin embargo, si el ancho se estableció en 700px y la altura en 1080px, vmin sería igual a 7px y vmax a 10.8px.
- ex y ch : estas unidades, similares a em y rem , se basan en la fuente y el tamaño de fuente actuales. Sin embargo, a diferencia de em y rem , estas unidades también dependen de
font-familyellas, ya que se determinan en función de medidas específicas de cada fuente. Launidad ch ("unidad de carácter") se define como el ancho del carácter cero ("0"). Launidad ex se define como "la altura x actual de la fuente actual o la mitad de 1em". La altura-x de una fuente determinada es la altura de la "x" minúscula de esa fuente. A menudo es la marca del medio de la fuente.
Hay dos tipos generales de unidades que se utilizan para longitud y tamaño en CSS: relativas y absolutas.
Unidades relativas
Las unidades relativas cambian en relación con el tamaño de fuente actual del elemento u otras configuraciones. Algunas unidades relativas son
em
- el ancho de una letra mayúscula M del del
font-sizeelemento actual. - Los tamaños de fuente se heredan de los elementos principales.
Ejemplo:
div { font-size: 16px; } div h3 { font-size: 2rem; }Aquí el
será igual 32pxya que el font-sizedel elemento actual o padre es 16px.
rem
- raíz
em, o el ancho de una letra mayúscula M de la base predeterminadafont-size. - Los tamaños de fuente principal no tendrán ningún efecto.
Ejemplo:
body { font-size: 16px; } p { font-size: 1.5rem; }Aquí el
será igual 24pxya que la base predeterminada font-sizees 16px.
%
- el tamaño porcentual relativo al tamaño de un padre.
Ejemplo:
div { width: 400px; } div p { width: 75%; }Dado que el ancho del padre es 400px, el ancho del pargrafo interior sería 300px, o el 75% de 400px.
vw
- ancho de vista, o 1/100 del ancho de la ventana gráfica
Ejemplo:
body { width: 100vw; }El bodyrelleno de la anchura de la ventana gráfica, ya sea que es 417px, 690px, o cualquier anchura.
vh
- altura de vista, o 1/100 de la altura de la ventana gráfica
Ejemplo:
div { height: 50vh; }Esto divllenará la mitad de la altura de la ventana gráfica, ya sea 1080px, 1300px o cualquier altura.
Unidades absolutas
Las unidades absolutas serán las mismas independientemente del tamaño de la pantalla u otras configuraciones. Algunas unidades absolutas son
px
- pixel
- los recuentos de píxeles son relativos a la calidad de la pantalla del dispositivo de visualización
in, cm,mm
- pulgada, centímetro, milímetro
- Una pulgada es una pulgada en una pantalla pequeña o en una pantalla grande
pt, pc
- puntos (1/72 de pulgada) y picas (12 puntos)
Ejemplo
p { font-size: 24px; } div { width: 3in; border-width: 3pt; }Un párrafo con font-size: 24pxse mostrará como 24px en un teléfono, tableta o pantalla de escritorio.
El divse mostrará como 3 pulgadas de ancho, y el borderen el divhabrá 3/72 de pulgada de espesor, con independencia del tamaño de la pantalla.