Unidades de medida en CSS

Temario unidades de medida en CSS

1. Introduccion
2. Pixeles
3. Unidades EMs
4. Unidades REMs (Root em)
5. Unidades EXs
6. Unidades CHs
7. Porcentajes (%)
8. Unidades del Viewport
9. ¿Cuándo usar cada unidad de medida?

Introduccion

Las unidades de medida se pueden clasificar en dos:

1. Absolutas

   Son unidades que su valor no cambia, es decir son unidades del mundo real, como por ejemplo:
   • pc
   • Centimetros: cm
   • milimetros: mm
   • Pulgadas: in
   • Q
   • Puntos: pt (1/72in)
   • Pixeles: px (1/96in)

2. Relativas

   Se le llama relativas porque su valor es relativo a un contexto, y hay tres tipos de unidades de medida:
   1. Las que estan basadas en el tamaño de la fuente que tenga el elemento al que se le este aplicando, como:
      • em: Basada en la anchura de la "m" de la fuente del elemento
      • rem: Basada en la anchura de la "m" de la fuente del elemento raíz (html).
      • ex: Basada en la altura de la "x" de la fuente del elemento.
      • ch: Basada en la anchura del "0" de la fuente del elemento.
   2. Al tamaño del contenedor como los porcentajes %.
   3. Al tamaño del viewport, (El viewport es el area visible de la pantalla dode se renderiza el contenido HTML), y son:
      • vw: Hace referencia al ancho del viewport y se le pueden asignar valores de 1 a 100.
      • vh: Hace referencia a la altura del viewport y se le puede asignar valores de 1 a 100.
      • vmax: Entre vw y vh toma el que tenga mayor valor.
      • vmin: entre vw y vh toma el que tenga menor valor.

   Elace a pagina pxtoem.com para realizar conversiones de unidades de medida.

Pixeles

Los pixeles son una noventa y seisaba parte del mundo real

En la medida de lo posible no es aconsebale utilizar pixeles sino unidades de medida relativas, por el llamado responsive web desing donde el contenido se tiene que ir adaptando al ancho de pantalla del dispositivo que lo consuma, y los pixels no permiten esto porque son unidades de medida absolutas.

Ejemplos:

Unidades EMs

Los em son unidades de medida que estan basadas en el ancho de la letra m, porque esta letra es la más ancha del alfabeto hablando tipograficamente de la fuente del elemento.

Cuando se utilicen ems hay que tener en cuenta que tamaño de fuente (font-size) tiene asignado el elemento contenedor padre. Los ems siempre van a hacer referencia al tamaño de fuente (es decir a la propiedad font-size), que tenga el contenedor padre que contiene un elemento.

NOTA: El tamaño por defecto que los navegadores asignan a la fuente es de 16px que equivle a 1.000 em.

Ejemplos:

Unidades REMs (Root em)

La unidad rem siempre va a estar basada en el tamaño de letra que tenga el elemento raiz del documento que es la etiqueta HTML cuyo tamaño por defecto es 16px.

Cuando hablamos de unidades rem simplemente tenemos que ver el tamño de letra que tiene asignado la etiqueta (roo raiz) HTML que por defecto es de 16px.

Ejemplos:

Unidades EXs

Los exs estan basadosen la altura de la letra X, que es la letra mas alta del alfabeto hablando tipograficamente.
los exs tambien toman de la unidad de medida del elemento padre contenedor.

En la practica los exs no se utilizan mucho.

Ejemplos:

Unidades CHs

Los ch esan basados en la anchura del cero de la fuente del elemento

Ejemplos:

Porcentajes (%)

Los pocentajes toman como referencia el tamaño del elemento contenedor.

La altura siempre va a estar definida por el contenido que tenga adentro la etiqueta HTML.

Ejemplos:

Unidades del Viewport

Las unidades de viewport siempre van a estar basadas en el tamaño de la pantalla.

El viewport es el area visible de la pantalla dode se renderiza el contenido HTML y tiene cuatro unidades de medida:

• vw (viewport width): Hace referencia al ancho del viewport y se le pueden asignar valores de 1 a 100 en unidades vw(viewport width).
• vh (viewport height): Hace referencia al alto del viewport y se le puede asignar valores de 1 a 100 en unidades vh(viewports height).
• vmax: Entre vw y vh toma el que tenga mayor valor.
• vmin: entre vw y vh toma el que tenga menor valor.

Ejemplos:

¿Cuándo usar cada unidad de medida?

Las unidades de medidas absolutas las podemos utilizar para diseñar los estilos de una pagina que se va a imprimir (dependiendo del formato de la hoja), como son: cm, mm, in.

Unidades en pixeles para definir la propiedad font-size de todo el documento HTML.

Las unidades relativas (em o rem) las podemos utilizar para la tipografia, paddings, margins, dictancias internas y externas.

NOTA: los porcentajes son muy utilizados en el diseño responsivo o Responsive Web Desing.

Las unidades del viewport podemos utilizarlas para generar efectos de pantalla completa, tambien para textos fluidos.