Unidades de medida CSS relativas o absolutas. in, cm, mm, pt, pc, pixel px, porcentaje, em, ex (CU01024D)

UNIDADES DE MEDIDA ABSOLUTAS

A continuación indicamos las unidades de medida absolutas disponibles en CSS:

Prueba a aplicar estas reglas sobre el código HTML de prueba que estamos usando en el curso.

Las unidades de medida absolutas en general podemos decir que se utilizan poco en desarrollos web, excepto el pixel que es una unidad especial y, en menor medida, el punto. Pulgadas, milímetros, picas, etc. tienen más sentido en trabajos de impresión sobre papel. El pixel tiene aplicaciones diversas mientras que la unidad pt se usa a veces para definir el tamaño de letra (tamaño de fuente).

El motivo para que las unidades absolutas se usen poco es que no permiten adaptarse al tamaño de la pantalla que utilice cada usuario. Hoy día, existen grandes pantallas (por ejemplo de 32 pulgadas de unos 480 x 730 mm) pero también pequeñas pantallas (por ejemplo smartphones con pantallas de 7 pulgadas de unos 90x170 mm de tamaño). Si queremos mostrar un contenido y lo definimos en unidades absolutas, por ejemplo con un ancho de 300 mm y un alto de 200 mm, cuando lo veamos en un monitor grande nos parecerá pequeño; por el contrario cuando lo veamos en un dispositivo pequeño como una tablet nos aparecerá cortado por ser excesivamente grande. Si en vez de unidades absolutas indicamos una unidad relativa como 100%, el contenido se adaptará al ancho disponible para cada dispositivo, lo cual resulta ventajoso. En realidad la gran variación de tamaño de los dispositivos supone un problema que no es nada fácil de solventar, ni siquiera utilizando unidades de medida relativas. Será uno de los campos en que la experiencia y la práctica resulten fundamentales en el trabajo con desarrollos web.

El pixel es una unidad de medida un tanto especial. Comprobaremos que se alude a esta medida como una unidad relativa, absoluta o híbrida según dónde consultemos. La realidad es que puede considerársela de cualquiera de estas tres maneras según dónde centremos nuestra atención. En nuestra opinión es más “justo” considerarla unidad relativa porque no tiene un valor absoluto y único, sino que presenta variaciones según los dispositivos. No obstante, estas variaciones son relativamente pequeñas o moderadas, de ahí que muchas veces se lo considere una unidad absoluta.

Una pantalla se divide en miles de pequeños puntos visibles denominados pixeles. Cuando distintos grupos de pixeles toman distintos colores se forman las letras, imágenes o formas que podemos ver en las pantallas. Por ejemplo si situamos pixeles negros uno junto a otro en horizontal sobre un fondo blanco, se acaba formando una línea negra horizontal. Si en vez de en horizontal cada pixel está ligeramente desplazado hacia la derecha y ligeramente por encima del anterior se formará una línea negra inclinada. Por el mismo principio se forman letras, imágenes, figuras, etc.

Las pantallas suelen tener una resolución expresada en pixeles, por ejemplo 1280 x 800 px, donde el primer valor indica el número de puntos horizontales y el segundo valor el número de puntos verticales en que se divide la pantalla (que podemos ver como una cuadrícula de minúsculos puntitos).

El tamaño real del pixel considerado como “un cuadradito muy pequeño” puede variar entre dispositivos, por ejemplo podremos encontrar dispositivos donde un pixel mida 0.20 mm y otros donde mida 0.30 mm. Las diferencias entre dispositivos pueden ser pequeñas cuando hablamos de tamaños de pantalla similares, pero se hacen apreciables para tamaños de pantalla muy diferentes.

El análisis teórico de las resoluciones de los dispositivos y unidades de medida puede ser extenso, por lo que nosotros vamos a optar por considerar al pixel, desde el punto de vista práctico, una unidad de medida híbrida. Absoluta en cuanto a que define unas dimensiones más o menos exactas para dispositivos similares (como monitores de ordenadores), relativa en cuanto a que sus dimensiones varían cuando cambiamos el tipo de dispositivo (por ejemplo en un smartphone el pixel tendrá distinta dimensión que en un monitor de 32”).  Esta definición puede ser poco exacta desde el punto de vista teórico, pero a efectos prácticos nos va a resultar suficiente para trabajar en desarrollos web. Consideraremos el pixel como un pequeño puntito visible de una pantalla. 

El pixel es una unidad de medida no tan rígida como pueda ser el mm y no tan flexible como pueda ser el % u otras unidades relativas. Permite fijar tamaños de forma relativamente precisa, pero a su vez con un cierto grado de adaptación al dispositivo en que se visualiza una web. Se usa con bastante frecuencia en distintos aspectos del diseño como iremos comprobando a lo largo del curso.

UNIDADES DE MEDIDA RELATIVAS

A continuación indicamos las unidades de medida relativas disponibles en CSS:

¿QUÉ UNIDAD USAR?

Las unidades estrictamente absolutas como el mm son poco habituales en los diseños web y podemos decir que prácticamente no se usan.

Son de uso muy habitual unidades relativas como el % y el em porque permiten la adaptación flexible a los distintos tamaños de pantalla de los dispositivos. El % nos permite establecer proporciones adecuadas en relación a la pantalla y el em en relación al tamaño de texto que se esté usando.

Por último el pixel es también muy usado pues permite que determinados elementos de la web se visualicen con tamaños bastante precisos, evitando que la web tenga cambios drásticos de aspecto cuando se cambie de dispositivo.

Usa preferentemente %, em y px en aquellas hojas de estilo que tengas que crear. Usa otras unidades cuando razonadamente resulten necesarias.

EJERCICIO

Los navegadores aplican un tamaño por defecto a los títulos h1 a h6, aunque estos tamaños no son siempre los mismos sino que dependen del navegador que se emplee. Para el navegador que estés empleando, divide la página web en una cuadrícula con 5 espacios a lo ancho y 6 espacios a lo alto, tal y como se ve en la siguiente tabla. En cada espacio, muestra un texto y la forma en que se ha definido el tamaño. Por ejemplo: h1 (predefinido), h1 (px), h1 (em), h1 (pt), h1 (%). El resultado ha de ser que todo se vea del mismo tamaño y modo, pero sin embargo la forma de definir el estilo será diferente en cada caso. Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

Orientación: h1 suele ser 24px ó 2em en la mayoría de los casos, pero tendrás que comprobarlo en el navegador que estés empleando.