Unidades de medida absolutas y relativas en CSS

Unidades de medida absolutas y relativas en CSS

Print Friendly, PDF & Email
Unidades de medida absolutas y relativas en CSS
5 (100%) 1 voto

¿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 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. No sabría decirte de dónde provienen las siglas em. Un em hace referencia al tamaño en px del párrafo. Típicamente 1em equivale a 12pt. 12pt son  16px.

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!

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.

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.