Programa
académico
CAMPUS
Ciclo HTML Y
CSS:
UNIDADES
RELATIVAS
Unidades Relativas
En CSS, es habitual trabajar con dimensiones, y
para expresarlas de manera precisa, es
fundamental conocer las unidades disponibles.
Existen diversas unidades, siendo las más
comunes px (píxeles) y % (porcentajes).
Antes de utilizar propiedades que involucren
medidas, como width (ancho de un elemento),
es aconsejable tener claro qué tipos de
unidades se pueden emplear.
Unidades Relativas – Tipos de unidades
Cuando comenzamos con CSS, es
recomendable empezar comprendiendo las
unidades de tamaño fijo, como los píxeles
(px), para luego explorar unidades más
avanzadas a medida que ganamos familiaridad
con su uso.
A continuación, se presenta los distintos tipos
de unidades de medida que se pueden utilizar.
Unidades Relativas – Tipos de unidades
Unidades Relativas – Tipos de unidades
Unidades Relativas – Tipos de unidades
Unidades ABSOLUTAS
Unidades Absolutas
Son medidas fijas e invariables,
Adecuadas para contextos estables como medios
impresos.
Son menos idóneas en la web actual, donde la
adaptabilidad es esencial,
Se sugiere utilizar una unidad absoluta al comenzar en
el desarrollo web como punto de partida
Unidades Absolutas – Pixel (px)
Es una de las más comúnmente empleadas en el
desarrollo web.
Aunque son absolutos (0.26mm), también son relativos
a la densidad de la pantalla.
Unidades Absolutas – Pixel (px)
Densidad de la pantalla
Unidades Absolutas – Pixel (px)
Son los pequeños puntitos luminosos en la pantalla de tu
monitor siendo el elemento más pequeño en un dispositivo de
exhibición
En CSS NO es realmente un píxel de la pantalla del
dispositivo (hardware), pero lo que llamamos píxel de
referencia que suele ser más grande que el píxel real.
Es el ángulo visual (0.0213 deg) de un píxel en un dispositivo
con una densidad de 96 dpi a una distancia de un brazo del
lector (28 pulgadas)
Unidades Absolutas – Points (pt)
Esta medida se usa generalmente en propiedades relacionadas
con la fuente de su proyecto. Su abreviatura está marcada con
pt y su uso no es tan común.
Esta unidad es ideal para imprimir, no para pantallas.
Unidades Absolutas – Points (pt)
q = "quarter-millimeter" o cuarto de milímetro tipográfico.1q = 0.25mm
exactamente (en realidad, 0.248 mm por definición tipográfica japonesa).
Unidades Absolutas
Unidades Absolutas
Unidades RELATIVAS
Unidades RELATIVAS
%
Aunque los porcentajes son comunes en CSS, requieren habilidad y
deben usarse con precaución al principio, ya que su valor depende del
tamaño del elemento padre inmediato.
Unidades RELATIVAS a la Fuente
em
Establece tamaños en relación con la tipografía del navegador en el
elemento HTML actual.
Se puede asumir que 1em equivale aproximadamente a 16px por
defecto.
Unidades RELATIVAS a la Fuente
em
Unidades RELATIVAS a la Fuente
em
No hay una definición de font-size en
el elemento específico, sino en su
elemento padre.
La propiedad font-size se hereda, el
tamaño del rectángulo azul (.element)
sería 32x64px,
Toma el valor de 32px del elemento
padre.
Unidades RELATIVAS a la Fuente
rem (root em)
Muchas unidades utilizan el prefijo "r", que representa la
palabra "root" (raíz).
Implica unidades em en el elemento raíz, que, en lugar de
basarse en el tamaño font-size del elemento actual, se refieren
al tamaño del elemento raíz.
Esta forma de medición permite trabajar con múltiplos del
tamaño base.
Se fija el tamaño base del documento, podemos emplear
unidades rem para establecer una escala en relación con ese
tamaño.
Unidades RELATIVAS a la Fuente
rem (root em)
Unidades RELATIVAS a la Fuente
rem (root em)
Unidades RELATIVAS a la Fuente
ex
Se utiliza para indicar el tamaño de la altura de la primera
letra minúscula de la tipografía.
Podemos considerar que 1ex es aproximadamente igual a
0.5em, es decir, la mitad del tamaño del font-size del
elemento actual.
Históricamente, la medida ex se basa en la altura del carácter
x en minúscula, que representa un poco más de la mitad del
tamaño de la fuente actual
Unidades RELATIVAS a la Fuente
ch
Hace referencia al ancho de un carácter alfanumérico europeo,
es menos conocida.
Suele asumirse como 0.5em para simplificar.
Históricamente, la unidad ch se basaba en el ancho de un
carácter 0, comúnmente utilizado en tipografías
monoespaciadas para números y textos que ocupan el mismo
espacio.
Unidades RELATIVAS a la Fuente
ch
Hace referencia al ancho de un carácter alfanumérico europeo,
es menos conocida.
Suele asumirse como 0.5em para simplificar.
Históricamente, la unidad ch se basaba en el ancho de un
carácter 0, comúnmente utilizado en tipografías
monoespaciadas para números y textos que ocupan el mismo
espacio.
Ancho del carácter 0 (zero) de la fuente actual.
Unidades RELATIVAS a la Fuente
ch
Unidades RELATIVAS a la Fuente
lh
Es una unidad relativa a la altura de línea (line-height) del
elemento actual.
1lh = la altura de una línea de texto del elemento actual
lh mide cuánto espacio ocupa una línea de texto y te deja usar
eso como base para definir otros tamaños, como márgenes,
paddings o alturas.
Mantiene proporciones tipográficas consistentes, sin importar el
tamaño de fuente.
Es ideal para diseños accesibles y responsivos, como:
Separación entre bloques de texto
Altura de contenedores
Unidades RELATIVAS a la Fuente
lh
Unidades RELATIVAS
Al Viewport
Unidades RELATIVAS
Al Viewport
Unidades RELATIVAS
Al Viewport (vw)
vw significa viewport width
Viewport no es más que el área visible de una página web para
su usuario
Puede variar según el dispositivo, siendo más pequeña en
móviles y más grande en computadoras desktops.
Unidades RELATIVAS
Al Viewport (vh)
Esta unidad funciona de la misma forma que la vw, pero esta
vez, la referencia será la altura y no el ancho.
Unidades RELATIVAS
Al Viewport (vmin -viewport minimun-)
Se relaciona con las dimensiones de la viewport.
Usará como base la dimensión más pequeña de la viewport
(altura x ancho)
Unidades RELATIVAS
Al Viewport (vmin -viewport minimun-)
Imagine que estamos trabajando con una viewport de 1600 px
de altura y 900 px de ancho. En ese caso, 1vmin tendrá el valor
de 9px (¡1% de la dimensión más pequeña!); si tenemos
100vmin, ¡esto será igual a 900px!
Unidades RELATIVAS
Al Viewport (vmax -viewport maximum)
El vmax tendrá como valor de referencia la dimensión más
grande de la viewport.
Con 300px de altura y 1400px de ancho, 1vmax será
equivalente a 14px. Esta vez, ¡siempre será la mayor
dimensión!
Unidades RELATIVAS
Al Viewport (vmax -viewport maximum)
Cuidado:
Programa
académico
CAMPUS
