Unidades de medida





 Las Unidades de medida

Se utilizan para definir la altura, anchura y márgenes de todos los elementos y para establecer el tamaño de letra del texto.

Se divide en dos grupos: absolutas y 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. 
La unidades relativas son más flexibles que las unidades absolutas porque se adaptan más fácilmente a los diferentes medios.

Pueden ser:
  1. em, relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de 1 em se puede aproximar por la anchura de la letra M ("eme mayúscula") del tipo de letra que se esté utilizando
  2. ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo de letra que se esté utilizando
  3. px, (píxel) relativa respecto de la pantalla del usuario

  • Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.
Sus valores reales no se calculan a partir de otro valor de referencia, sino que son directamente los valores indicados. 

Pueden ser:

  • in, del inglés "inches", pulgadas (1 pulgada son 2.54 centímetros)
  • cm, centímetros
  • mm, milímetros
  • pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros)
  • pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)


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).

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. Algunas propiedades permiten indicar medidas negativas, aunque habitualmente sus valores son positivos.

La conversión de Puntos - Píxels - Ems - % 


Tabla de equivalencias

PuntosPixelesEm%
6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%




En esta tabla se convierte de puntos a píxeles, ems y %. Es una aproximación, que dependerá de la fuente, el navegador y el sistema operativo, pero es un buen punto de partida.

Continua la tabla anterior
PuntosPixelesEm%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%

Sigo trabajando en incrementarla.




Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top