Este es el primer post del blog y voy a comenzar escribiendo sobre diseño y desarrollo web, que es el tema principal sobre el que tratarán la mayoría de contenidos.
Antes de abordar temas de javascript o framework css más complejos como bootstrap, voy a repasar algunas de las partes que a menudo se me olvidan en css. Una de ellas son las unidades de medida.
Las unidades de medida en css son una abreviatura añadida a continuación de los valores numéricos que usamos en tamaño de fuentes, espacio de relleno, márgenes, tamaño de bloques, etc. sin la cual, éstos carecen de sentido. Podemos dividirlas en dos tipos: absolutas y relativas.
Absolutas
Están unidas a unidades físicas y no necesitan de ningún valor de referencia para aplicarse. Algunos ejemplos son:
- px: Píxeles. A mi me gusta considerarla como absoluta ya que no podemos intervenir en la referencia que la define ya que es la unidad mínima en que podemos dividir la pantalla de un dispositivo. A veces la encontraremos definida como unidad relativa ya que realmente cada dispositivo tiene físicamente un tamaño de pixel diferente dependiendo de su densidad de píxeles. No obstante el pixel de referencia para css es 1/96in, es decir tomando como densidad de pixeles 96ppi.
- cm: Centímetros
- mm: Milímetros
- pt: Puntos. Un punto es igual a 1/72 pulgadas o 0.35mm. Suele usarse en documentos preparados para impresión.
- pc: Picas. Una pica equivale a 12 puntos, o 4.23mm.
- in: Pulgadas. Una pulgada equivale a 25.4mm.
Relativas
Necesitan de otro valor de referencia para quedar completamente definidas. Son las más recomendadas para diseños responsive.
- %: Porcentaje. Este porcentaje será relativo al tamaño valor que tenga el elemento padre en la propiedad concreta que estemos definiendo.
- em: Hace referencia a la altura de la letra M mayúscula en la tipografía que tenga definida el elemento sobre el que estemos actuando.
- ex: Igual que el anterior pero usando la letra x minúscula.
- ch: Igual pero usando el ancho del caracter 0. Útil si queremos dar ancho a un input por ejemplo.
- rem: Hace referencia al tamaño de fuente del elemento raíz
- vh: 1% del alto del viewport (región visible de la web en el navegador).
- vw: 1% del ancho del viewport.
- vmin: 1% del valor mínimo entre el ancho y alto del viewport.
- vmax: 1% del valor máximo entre el ancho y alto del viewport.
Para resumir, podemos decir que en la práctica realmente nos dejamos de tantas unidades y solo se suelen usar los porcentajes (%), em o rem para las fuentes, y por el contrario px para márgenes y otros tamaños relacionados con los bloques.