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.
Hay dos clases de unidades de longitud, las relativas y las absolutas.
| Unidades absolutas | |
|---|---|
| in | pulgadas (1 pulgada = 2.54 centímetros) |
| cm | centímetros |
| mm | milímetros |
| pt | puntos (1punto = 1/72 pulgada) |
| pc | picas (1 pica = 12 puntos) |
| Unidades relativas | |
| em | ems (altura de la fuente de los elementos) |
| ex | x-height (altura de la letra "x") |
| px | pixeles (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.
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.4cm | 4mm |
| 0.5cm | 5mm |
| 0.75cm | 7.5mm |
| 1cm | 10mm |
| Puntos (font-size:valor) | Picas (font-size:valor) |
|---|---|
| 10pt | 0.85pc |
| 12pt | 1pc |
| 14pt | 1.2pc |
| 16pt | 1.3pc |
| Pulgadas (font-size:valor) | Pixeles (font-size:valor) |
|---|---|
| 0.15in | 9.6px |
| 0.16in | 12px |
| 0.18in | 18px |
| 0.2in | 24px |
UNIDADES RELATIVAS A UN ELEMENTO BASE DE 12 PIXELES
0.8em (= 9.6px)
1em (= 12px)
1.5em (= 18px)
2em (= 24px)
1em (= 12px)
1.5em (= 18px)
2em (= 24px)
1.6ex (= 9.6px)
2ex (= 12px)
3ex (= 18px)
4ex (= 24px)
2ex (= 12px)
3ex (= 18px)
4ex (= 24px)
80% (= 9.6px)
100% (= 12px)
150% (= 18px)
200% (= 24px)
100% (= 12px)
150% (= 18px)
200% (= 24px)
En la dirección: (http://www.reeddesign.co.uk/test/points-pixels.html)
ResponderBorrartenemos una tabla de conversión aproximada entre las unidades de medida más utilizadas, una buena referencia al tema.
Salud.
Como siempre, muy buen aporte de Cosas Sencillas, no la conocía, me hubiera evitado hacer tantas cuentas :-D.
ResponderBorrar