Unidad 3. Básico: Unidades de distancias y tamaños

Unidades:

Podemos utilizar dos tipos de unidades: unidades fijas, con un tamaño invariable, y unidades relativas, cuyo tamaño depende del de otros elementos.

Las unidades las colocamos detrás del número, sin dejar espacios en blanco. Por ejemplo, 5px es correcto, 5 px nos dará un error. Cuando el valor es 0, no es necesario poner la unidad.

Las unidades fijas son las utilizadas en el mundo real:

• cm: centímetros
• mm: milímetros
• in: pulgadas (1in = 2,54cm)
• pc: picas, la sexta parte de una pulgada
• pt: puntos, la doceava parte de una pica.

 

Pero lo más frecuente es utilizar unidades relativas:

• em: el tamaño de la fuente. Por ejemplo, 2em es dos veces el tamaño de la fuente actual.
• ex: la altura de la letra x de la fuente actual.
• px: píxeles de la pantalla. Puede parecer un valor fijo, pero el tamaño variará si lo comparamos con dos pantallas de distinta resolución.
• %: Cuanto se refiere a al tamaño, por ejemplo al ancho, es en relación al elemento que lo contiene. Si se utiliza para el tamaño de la fuente, es en relación al tamaño actual.

Si queremos expresar valores decimales, lo haremos con el punto (.). P.ej: 33.33%

Ejemplos:

Ancho: 50%

Ancho: 300px

Ancho: 5cm

Puedes probar a hacer más pequeña la ventana y comprobar que la primera franja se encoge.

Alto: 2.5em

Alto: 2.5em

Alto: 20px

Alto: 20px