JMiur [E]

En las cualquier propiedad CSS, un valor de longitud se forma por un número y dos letras que indican su tipo de unidad, sin espacios entre ellos:
width:1.3 em /* es incorrecto */
width:1.3em /* es correcto */
La única excepción es cuando establecemos un valor de 0, en ese caso no se necesitan las dos letras para identificar la unidad.

Hay dos clases de unidades de longitud, las relativas y las absolutas.


Unidades absolutas
inpulgadas (1 pulgada = 2.54 centímetros)
cmcentímetros
mmmilímetros
ptpuntos (1punto = 1/72 pulgada)
pcpicas (1 pica = 12 puntos)
Unidades relativas
emems (altura de la fuente de los elementos)
exx-height (altura de la letra "x")
pxpixeles (relativa a la resolución de la pantalla)
%porcentaje

Las unidades de longitud absolutas son muy dependientes del medio de salida, y son útiles sólo si se conoce cuál es el medio (monitores, impresoras).

Las unidades relativas especifican una longitud relativa a otra propiedad de longitud ya definidas y se ajustan mejor a medios diferentes.

Usar pixeles (px) proporciona un control más efectivo que las otras. Los navegadores los interpretan correctamente, en cambio, los porcentajes (incluyendo em) dependen del valor de un elemento anterior que, pudo ser establecido o no, por ejemplo el valor por defecto para el texto del body es 16 pixeles.

Las unidades em y ex son relativas al tamaño de la fuente usada, excepto cuando se incluyen en la misma propiedad font-size donde se hacen relativas al font de un elemento definido en un tag anterior.

EJEMPLOS PRÁCTICOS APLICADOS A LOS TEXTOS

Centímetros (font-size:valor)Milímetros (font-size:valor)
0.4cm4mm
0.5cm5mm
0.75cm7.5mm
1cm10mm

Puntos (font-size:valor)Picas (font-size:valor)
10pt0.85pc
12pt1pc
14pt1.2pc
16pt1.3pc

Pulgadas (font-size:valor)Pixeles (font-size:valor)
0.15in9.6px
0.16in12px
0.18in18px
0.2in24px

UNIDADES RELATIVAS A UN ELEMENTO BASE DE 12 PIXELES

0.8em (= 9.6px)
1em (= 12px)
1.5em (= 18px)
2em (= 24px)
1.6ex (= 9.6px)
2ex (= 12px)
3ex (= 18px)
4ex (= 24px)
80% (= 9.6px)
100% (= 12px)
150% (= 18px)
200% (= 24px)

2 comentarios:

Toni  

En la dirección: (http://www.reeddesign.co.uk/test/points-pixels.html)
tenemos una tabla de conversión aproximada entre las unidades de medida más utilizadas, una buena referencia al tema.
Salud.

Responder
JMiur  

Como siempre, muy buen aporte de Cosas Sencillas, no la conocía, me hubiera evitado hacer tantas cuentas :-D.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR