¿Cuál es el tamaño de cada uno de los elementos de una página web?
Encontraremos la respuesta en las unidades de medida.
Las unidades CSS pueden ser absolutas o relativas.
Las unidades absolutas hacen referencia a una medida física inalterable. Por ejemplo los centímetros y/o las pulgadas.
Las unidades relativas dependen de otra medida. Por ejemplo pueden depender del ancho disponible en una pantalla de ordenador. Lo que las hace muy adecuadas para el diseño de páginas web responsive.
Veamos cuales son las principales unidades de medida.
Unidades de medida absolutas
Las unidades absolutas son fijas e invariables independientemente del tamaño de cualquier otro elemento.
Son adecuadas cuando se va a imprimir en formato físico y nos queremos asegurar de las dimensiones en el mundo real.
Su uso no es muy común (al menos hasta dónde un servidor conoce)
CSS acepta:
- El milímetro, mm
- El centímetro, cm
- La incha, in
- El punto, pt
- La pica, pc
Unidades de medida relativas
Las unidades relativas más comunes son:
- El porcentaje, %. Se define respecto del ancho disponible. Por ejemplo el ancho del contenedor que atrapa una capa. Es común que a esta capa de «orden superior» se le aplique un ancho fijo. Normalmente en píxeles. (hablamos de los px un poco más adelante).
- em. Un em hace referencia al tamaño en px del párrafo. Típicamente 1em equivale a 12pt. 12pt son 16px. Tiene su origen en el ancho de la letra mayúscula M de la tipografía en uso.
Se usan cada vez más el rem, el vh, vw, vmin y vmax.
- vh, 1% del viewport vertical. El viewport es el browser window height; la altura definida por el navegador web.
- vw, 1% del viewport horizontal. El viewport es el browser window width; el ancho definidao por el navegador web.
- vmin, valor mínimo de vh.
- vmw, valor mínimo de vw.
- rem, muy parecida al em pero en lugar de ser en base al font-size del elemento es en base al font-size del elemento root. (El root es un concepto muy similar al de selector universal pero con más especificidad.
El píxel, ni fijo ni relativo
¿Dónde clasificamos el píxel?
El píxel es la unidad mínima de color que forma una imagen digital.
También es la unidad física mínima que forma una pantalla.
Hace unos años indudablemente era una medida absoluta que dependía del tamaño de píxel en milímetros de las pantallas.
Hoy en día con las llegadas de las pantallas de retina el tamaño absoluto de un píxel ya no está tan claro. Por ejemplo en una pantalla de retina por cada píxel de retina encontramos 2 píxeles convencionales.
Por este motivo hay quién le gusta decir que es una medida absoluta y quién defiende que en realidad es relativa.
En cualquier caso, el px es la medida más utilizada de todas.
Debemos saber que por defecto el tamaño de fuente definido por los principales navegadores es de 16px.
Las medidas de una página web más comunes suelen ser 900px, 1150px, 1300px o 1800px de ancho. (Personalmente siempre me quedo el rango 1150-1300px)
¿Cuanto mide un dedo?
¿Te has preguntado alguna vez cuanto mide un dedo?
Está estudiado que de media suelen ser 72px.
Recursos para profundizar
Esta entrada pretende dar una idea general de como funcionan las medidas en CSS y lo más importante que debemos retener. Son unos apuntes de clase…
Si queréis profundizar os recomiendo pasar (aunque en inglés) por esta lectura del W3C. ¡Recomendadísima!
Ejercicios recomendados
Hola querido lector,
Espero que esta entrada resumen sobre las medidas te haya sido útil para poner todo en orden.
Como norma, intenta utilizar siempre los pixeles (px) y los porcentajes.
Nos leemos mañana, como siempre, con un nuevo contenido en el blog.
Deja una respuesta