¡Bienvenidos a TIEngranaje! En esta ocasión, te hablaremos acerca de uno de los conceptos más importantes e indispensables en el mundo del diseño web: las unidades de medida CSS. Si eres un diseñador o desarrollador web, sabes que estas unidades son esenciales para crear layouts responsivos y seguir las mejores prácticas en UI/UX design. En este artículo, exploraremos las diferentes unidades de medida CSS y cómo utilizarlas de manera efectiva en tus proyectos web. ¡Comencemos!
Hay muchas propiedades en CSS a las que se les asigna un valor como length, size, widtho height. En CSS, expresas estos valores usando uno de muchos tipos de unidades de medida.
CSS le proporciona nueve unidades con el que definir el valor de las propiedades que requieren algún tipo de medición. Debería nota que puede usar cada una de estas unidades para definir el tamaño de cualquier cosa, incluso si la unidad en sí se deriva del tamaño de una fuente.
Tendrá que decidir por sí mismo qué elementos deben dimensionarse utilizando qué unidades, pero no hay nada que le impida dimensionar elementos utilizando cualquiera que sea el tipo de medida que elija.
Medida absoluta
| Unidad | Descripción | Ejemplo |
|---|---|---|
in |
pulgadas | text-indent: 1in |
cm |
centímetros | margin-bottom: 5cm |
mm |
milímetros | word-spacing: 10mm |
pt |
puntos (72 puntos = 1 pulgada) | font-size: 18pt |
pc |
picas (12 puntos = 1 pica) | font-size: 2pc |
Medida relativa
| Unidad | Descripción | Ejemplo |
|---|---|---|
% |
porcentaje | line-height: 150% |
em |
1em es igual al tamaño de fuente actual | letter-spacing: 5em |
ex |
relativo a la altura x de una fuente. | line-height: 3ex |
px |
píxeles | padding: 20px |
Punto, Pica, Pulgada, Centímetro y Milímetro
Estas unidades se utilizan normalmente para la impresión. A punto (1pt) equivale a 1/72 de pulgada, mientras que un pica (1 pieza) equivale a 1/6 de pulgada. Los documentos destinados a medios impresos podrán para decirle al dispositivo exactamente cuál es el tamaño de estas unidades.
Pantallas digitales (tu monitor), tendrás que cotizar cómo convertir estas unidades en píxeles. Los documentos diseñados para mostrarse en la web deben evitar el uso de estas unidades.
píxel
Píxeles definir el tamaño de un elemento utilizando un número específico de píxeles. Esto es muy conveniente cuando se diseña para mostrar información en monitores digitales, ya que le brinda control exacto sobre el tamaño del elemento.
Hay varios desventajas al uso de píxeles debe tener en cuenta. Establecer el tamaño de una fuente usando unidades de píxeles no permite al usuario cambiar el tamaño de esa fuente utilizando su navegador.
Cuando establece el tamaño de una fuente en 12 píxeles, se siempre tener una altura de 12 píxeles, independientemente de lo que el usuario haya establecido como tamaño de fuente predeterminado. Imprimir un documento con tamaños establecidos en píxeles puede parecer ligeramente diferente de una impresora a otra, ya que un píxel no tiene un tamaño real.
Porcentaje
Al asignar unidades porcentuales a una propiedad que no es un font-size o line-heightese valor siempre se relaciona al bloque principal de ese elemento, como cuando se asigna el width propiedad, por ejemplo.
Al asignar unidades porcentuales a la font-size o line-height propiedades, actúan como el em unidad, donde 100% es igual a 1em.
em
Cuando se utilizan ems en CSS, el em representa el tamaño de fuente predeterminado del usuario o el tamaño de fuente del elemento principal. Ems están configurados para unidades decimalescomo 0.9, 1em, 1.1em, etc.
Estas unidades pueden ser pensado como porcentajes del elemento principal o tamaño de fuente predeterminado, donde 1.1 equivaldría a 110%.
Ex
Un ex es similar a un emcomo un em también es un unidad de medida relativa que define que 1 unidad es igual al tamaño de la letra «x» en el tamaño de fuente predeterminado.
tenga en cuenta que la mayoría de los navegadores no admiten esta unidad de medida, por lo que usar esta unidad debería ser evitado para su uso en páginas web.
