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

Resumen: Entrega nº24 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01024D

 

 

UNIDADES DE MEDIDA

Cuando trabajamos con CSS necesitaremos especificar con frecuencia anchura, altura, márgenes o tamaño de distintos elementos como cajas contenedoras de distintos tipos, imágenes, texto, etc. CSS permite la especificación de valores relacionados con el tamaño de distintas maneras para facilitar el trabajo a los programadores y diseñadores web.

css

 

Las unidades de medida CSS se dividen en dos grupos: unidades de medida relativas y unidades de medida absolutas. También se habla a veces de unidades híbridas.

Las unidades de medida relativas son aquellas que determinan un tamaño en función de otro tamaño. Por ejemplo si indicamos que el ancho de un elemento es un 50%, dicho porcentaje tiene que estar referido al 50% de algo ¿de qué? En el caso de un ancho del 50% puede estar referido normalmente al 50% del ancho que tenga el contenedor del elemento. Las unidades relativas aluden a un elemento de referencia. Veremos que existen distintos elementos que se toman como referencia.

Las unidades de medida absolutas son aquellas que determinan el tamaño de algo de forma concreta, específica y medible. Por ejemplo si decimos que un tamaño de un div debe ser de 150 mm de alto, no hay duda al respecto. El div tomará exactamente ese valor (aunque puede haber pequeñas distorsiones en función del dispositivo en que se visualice) y si cogemos una regla escolar y lo medimos, el div tendrá esa medida (aproximadamente 150 mm).

Las unidades de medida se aplican a numerosas propiedades CSS de las que empezaremos destacando dos de ellas: width (ancho de un elemento) y height (alto de un elemento). La sintaxis a emplear es la siguiente:

selectorDeElemento {width: valorDePropiedadUnidades;
                               height: valorDePropiedadUnidades;}
 
 

UNIDADES DE MEDIDA ABSOLUTAS

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

Unidad

Símbolo

Ejemplo

Observaciones aprenderaprogramar.com

Pulgada

in

div {background-color:pink; width: 7in;}

1 pulgada son 25.4 mm

Centímetro

cm

div{background-color:pink; width: 20cm;}

 

Milímetro

mm

div{background-color:pink; width: 1000mm;}

 

Punto

pt

div{background-color:pink; font-size: 24pt;}

1 punto equivale a 1/72 pulgadas ó aprox. 0.35 mm

Pica

pc

div{background-color:pink; font-size: 2pc;}

1 pica equivale a 12 puntos o aprox. 4.23 mm

Pixel*

px

div{background-color:pink; font-size: 24px;}

Tantas veces los puntos visibles que tenga la pantalla donde se visualice la página web como se especifique.

*Puede considerarse una unidad híbrida, ni absoluta ni relativa.

 

 

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:

Unidad

Símbolo

Ejemplo

Observaciones aprenderaprogramar.com

Porcentaje

%

#menu1 {width: 50%;}

Porcentaje relativo al elemento contenedor.

Relativa al tamaño de letra

em

#menu1 {font-size: 2.65em;}

Tantas veces el tamaño que sea de aplicación como se indique. Por ejemplo si el tamaño de letra de aplicación es 12 pixeles, 1 em son 12px, 2 em son 24 px, 3 em son 36 px, etc.

Relativo a la x minúscula

ex

#menu1 {font-size: 2.65ex;}

Tantas veces la altura de la letra x minúscula como se especifique. Por ejemplo si la x minúscula que se debería mostrar mide 10mm, 1 ex son 10 mm, 1.5ex son 15mm, 2ex son 20mm, etc.

Pixel*

px

#menu1 {font-size: 24px;}

Tantas veces los puntos visibles que tenga la pantalla donde se visualice la página web como se especifique.

*Puede considerarse una unidad híbrida, ni absoluta ni relativa.

 
 
 

¿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.

Título Tamaño px Tamaño em Tamaño pt Tamaño %
h1        
h2        
h3        
h4        
h5        
h6        

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

FEBRERO - MARZO 2017

1. Java / J2EE
2. Entornos Oracle
3. JavaScript, jQuery
4. .NET, C#
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación