Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).
Valores en CSS
Hay gran variedad de valores CSS, algunos de ellos muy usuales y otros que rara vez nos encontraremos.
- Valores numéricos: Valores de longitud para expresar el ancho de elementos, de bordes, o tamaño de fuentes; también enteros sin unidades para expresar anchos de línea o veces que se repite una animación.
- Porcentajes: Se usan para expresar tamaño o longitud — relativos por ejemplo al ancho y alto del contenedor previo o al tamaño de fuente predeterminado.
- Colores: Para expresar colores de fondo, de texto, etc.
- Coordenadas: Para expresar la posición relativa de un elemento desde, por ejemplo, el margen superior izquierdo de la pantalla.
- Funciones: Para expresar imágenes de fondo o el degradado de la imagen de fondo.
Tipos de medidas en CSS
Las unidades y medidas en CSS están divididas en dos grandes grupos:
- Unidades Absolutas
- Unidades Relativas
Las unidades relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado.
Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.
Si el valor es 0, la unidad de medida es opcional. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente, lo que suele ser uno de los errores más habituales de los diseñadores que empiezan con CSS.
Algunas propiedades permiten indicar medidas negativas, aunque habitualmente sus valores son positivos.
Si el valor decimal de una medida es inferior a 1, se puede omitir el 0 de la izquierda (0.5em es equivalente a .5em).
Unidades de medida en CSS absolutas
Como su nombre indica, son unidades que están completamente definidas. Esto quiere decir que su valor no depende de otro valor de referencia.
En este grupo encontramos los siguientes elementos:
- cm: Aumenta el tamaño del texto o elemento en centímetros
- mm: Aumenta el tamaño del texto o elemento en milímetros
- in: Aumenta el tamaño del texto o elemento en pulgadas (1in = 96px = 2.54cm)
- px: Aumenta el tamaño del texto en pixeles (Dependiendo del dispositivo, este elemento se clasifica también en Unidades Relativas. Aunque también depende de la versión de CSS que se maneje)
- pt: Aumenta el tamaño del texto en puntos (1pt = 1/72 de 1 pulgada), es decir, unos 0.35 milímetros
- pc: Aumenta el tamaño del texto en picas (1pc = 12 puntos aprox), es decir, unos 4.23 milímetros
La principal ventaja de las unidades absolutas es que su valor es directamente el valor que se debe utilizar, sin necesidad de realizar cálculos intermedios.
Su principal desventaja es que son muy poco flexibles y no se adaptan fácilmente a los diferentes medios. De hecho, cada navegador interpreta las medidas absolutas de forma ligeramente diferente.
Unidades de medida en CSS relativas
Este tipo de unidad se expresa en forma de porcentaje (%) y se adapta de acuerdo al tamaño de otro valor de referencia.
Las unidades relativas se subdividen en 2 grupos:
- Relativas a la tipografía
- Relativas al viewport o ventana
Unidades relativas a la tipografía
- em: (No confundir con la etiqueta de HTML
<em>) Relativo al tamaño de fuente del elemento actual. La unidad 1em equivale a la anchura de la letra “M” (eme mayúscula) del tipo y tamaño de letra del elemento - ex: Relativa respecto de la altura de la letra “x” (equis minúscula) del tipo y tamaño de letra del elemento actual
- ch: Relativo a la anchura del carácter "0" (cero) del tipo y tamaño de letra del elemento actual
- rem: Es igual a (em) con la diferencia de que este actúa en la raíz. O sea, que ésta siempre será relativa al tamaño de fuente por defecto. Los tamaños de fuente heredados no le afectan, por lo que parece mejor solución que em
Las unidades em y ex no han sido creadas por CSS, sino que llevan décadas utilizándose en el campo de la tipografía.
La unidad em es relativa al tamaño del texto del contenedor donde está el elemento al que se aplica esa unidad. Y siempre es relativo al tamaño del texto, aunque se aplique en una propiedad como width que afecta a la anchura del elemento. Si se utiliza una tipografía de 12 puntos, 1em equivale a 12 puntos. El valor de 1ex corresponde aproximadamente a 0.5 em.
El tamaño de fuente por defecto que usan los navegadores antes de aplicar CSS es de 16 píxeles, lo que significa que este es el valor asignado por defecto a un elemento (1em).
¡ Ojo ! Los tamaños de fuente de los elementos se heredan de los padres, por lo que, si a los padres se les aplica otros tamaños de fuente, la equivalencia en pixel de un em puede complicarse.
Sin embargo, el valor de las medidas relativas no se hereda directamente, sino que se hereda su valor real una vez calculado. El siguiente ejemplo muestra este comportamiento:
body {
font-size: 12px;
text-indent: 3em;
}
h1 {
font-size: 15px
}Lenguaje del código: PHP (php)La propiedad text-indent, se utiliza para tabular la primera línea de un texto. El elemento <body> define un valor para esta propiedad, pero el elemento <h1> no lo hace, por lo que heredará el valor de su elemento padre. Sin embargo, el valor heredado no es 3em, sino 36px.
Si se heredara el valor 3em, al multiplicarlo por el valor de font-size del elemento <h1> (que vale 15px) el resultado sería 3em x 15px = 45px. No obstante, los valores que se heredan no son los relativos, sino los valores ya calculados.
Por lo tanto, en primer lugar se calcula el valor real de 3em para el elemento <body>: 3em x 12px = 36px. Una vez calculado el valor real, este es el valor que se hereda para el resto de elementos.
Relativas al viewport - ventana
Estas unidades son relativas, aunque en este caso lo son a la pantalla del dispositivo.
- vw: Porcentaje relativo a la anchura del viewport que corresponde al 1% del ancho de la ventana
- vh: Porcentaje relativo a la altura del viewport que corresponde al 1% de la altura de la ventana
- vmin: Entre vw y vh toma el que tenga menor valor
- vmax: Entre vw y vh toma el que tenga mayor valor
Estas medidas tienen múltiples usos, por ejemplo cuando queremos tener una imagen de fondo que ocupe todo el ancho y alto de nuestro pantalla. También cuando queremos que nuestro texto varíe de acuerdo a las medidas del dispositivo.
Las unidades relativas al viewport son muy importantes y se deben tomar en cuenta cuando realizamos una web para varios tipos de resolución de pantalla.
Sin embargo, debemos tener en cuenta la compatibilidad, ya que estas medidas solo funcionan en ie9+, Chrome 34+, Firefox 19+, Safari 7+, Android 4.4+ y iOS 6+. En safari y chrome de iOS 6 y 7, vh genera un comportamiento erróneo.
La gran ventaja de las unidades relativas es que siempre mantienen las proporciones del diseño de la página.
Establecer el margen de un elemento con el valor 1em equivale a indicar que "el margen del elemento debe ser del mismo tamaño que su letra y debe cambiar proporcionalmente".
En general, se recomienda el uso de unidades relativas siempre que sea posible, ya que mejora la accesibilidad de la página y permite que los documentos se adapten fácilmente a cualquier medio y dispositivo.
Porcentajes
También podemos usar valores porcentuales para expresar la mayoría de cosas que requieran de valores numéricos, lo que nos permite crear, por ejemplo, cajas cuya anchura cambie según el ancho del contenedor padre. En contraposición a las cajas cuya anchura está definida por un cierto valor (en px o em), que siempre serán de la misma longitud, incluso aunque cambie el ancho de los contenedores padres.
Estas dos maneras diferentes de formar las cajas se conocen como formato líquido (se redimensiona con la ventana del navegador), y formato de ancho fijo (permanece invariable).
¿Qué unidades CSS son mejores, fijas o relativas?
Entonces, ¿Es mejor usar unidades de medida en CSS fijas o relativas? Pues la verdad es que no hay una respuesta exacta que sirva en todas las situaciones. Debes conocer bien las características de cada una para saber cuál usar.
Debido al desarrollo responsive y la gran variedad de tamaños de pantalla de los dispositivos, se recomienda usar, siempre que sea posible, unidades de medida relativas. Pero esto no se puede tomar como una regla general.
Cuando definas la anchura de un elemento que forma parte del diseño usarás habitualmente las unidades relativas, para que al agrandar o disminuir el espacio siga adaptándose bien y se distribuyan correctamente las cajas para las dimensiones actuales del navegador.
En la definición de tamaños de las fuentes también es muy útil trabajar con unidades relativas, dado que así todos los tamaños del texto se adaptarán al elemento raíz.
Pero a veces hay elementos que por necesidad tienen dimensiones fijas, como imágenes que quizás no desees que se estiren o se encojan dependiendo de la pantalla, columnas que deben tener siempre unas mismas dimensiones fijas, elementos de interfaz gráfica que no deseamos que alteren su forma, etc.
En general, encontrarás más casos en los que aplicar unidades relativas, aunque no significa que debas considerarlo como una regla general de obligado cumplimiento, pues habrá muchas ocasiones donde serán necesarias las unidades fijas.
