Unidad de medida relativa “em”
Posted by maximiliano | Posted in Accesibilidad, Buenas Prácticas, CSS | Posted on 06-08-2007
8
Para aclarar una duda que planteó un alumno en la charla de CSS trataré de explicar mejor esta definición, así que vamos por parte.
Según las especificaciones CSS2 de las W3C las “em” se definen como cito.
La unidad ‘em’ es igual al valor computado de la propiedad ‘font-size’ del elemento en el que se usa. La excepción es cuando ‘em’ aparece en el valor de la propiedad ‘font-size’ en sí misma, en cuyo caso se refiere al tamaño de la fuente del elemento padre. Puede usarse para longitudes verticales u horizontales. (Esta unidad también es denominada cuadratín en los textos sobre tipografía.)
“em” o cuadratín
Primero dejo claro que “em” es la traducción al ingles de “cuadratín” que es un término tipográfico que refiere al cuerpo de una tipografía dada y corresponde al ancho de la m o alto de la M capital.
Si la CSS utilizada por un sitio no define “font-size” la unidad “em” es relativa al tamaño de fuente que tenga por defecto definido el navegador.
Al ser una unidad relativa, si el usuario define en su navegador el tamaño de las fuentes más grandes, este ajuste de propiedad afecta por defecto a todos los elementos que estén definidos en base a “em”. Es recomendable entonces, definir en “ems” todas las propiedades como anchos, márgenes, padding, font-size, bordes, etc. asegurándonos la completa “escalabilidad” del Diseño Front implementado.
Accesibilidad
Al utilizar unidades relativas también estamos incrementando el nivel de accesibilidad de nuestro diseño, entregando mayor control al usuario al mantener las proporciones de los elementos que disponen la información.
No entendi….
:(
Estimado Amigo, tengo una inquietud, me podrias indicar como maquetar utilizando unidades de medida en porcentaje.
Gonzalo,
la lógic apara maquetar en % es que nunca los elementos internos deben sumar más de 100(%) considerando el modelo de caja de CSS que suma tanto el ancho (propiedad width) como los bordes, márgenes y padding en el ancho total.
Saludos
Gracias, por la información.
Otra pregunta Maximiliano, en la parte de arriba hablando de em manifistas textualmente lo siguinete:
Es recomendable entonces, definir en “ems” todas las propiedades como anchos, márgenes, padding, font-size, bordes, etc. asegurándonos la completa “escalabilidad” del Diseño Front implementado.
Estado maqueteando usando px para todas las unidades, márgenes padding, border, calculando que 800px es equivalente a 20 cm. La pregunta seria en uniades em como hago el equivalente a cm, para tener una referencia de cuanto dejar para padding, margen y border?
De antemano te agradesco por la informacion
Saludos
Gonzalo
Gonzalo,
ojo que no existe un relación de px y cm son unidades que no se pueden comparar por estar en soportes distintos, por ejemplo. Mi pantalla mide de ancho 30cm y puedo configurarla para que tenga resoluciones desde 800px de ancho hasta 1440px y siempre en los 30cm de la pantalla.
Ahora si estas pensando en imprimir, claro que el tema es con cm pues es la unidad física que corresponde. Te recomiendo utilizar un CSS específico para impresora.
http://www.w3.org/TR/css-print/
Ahora, casi 3 años después de este post, recomiendo bordes trabajados en px pero considerando este factor a a hora de los modelos de cajas con propiedad float (lesft o right).
Saludos
Ok, muy claro Maximiliano.
Te comento una situacion, estoy queriendo hacer una pagina para que se pueda ver en un telefono celular, entonces estaba leyendo que se requiere maquetear en %, y el texto en unidades em; empece a realizar unas pruebas de maquetacion con % y me salio bien lo que queria, pero me quedo una duda pq en la parte de margen, padding y bordes de las cajas le sigo poniendo en px, y como en tu comentario inicial recomendaba usar em, x eso queria saber en lugar de los px utilizados cuanto en em deberia poner.
Claro voy a empezar a probar, pero pense que habria alguna relacion mas o menos.
Maximiliano, te comento que soy nuevo en esto de la creacion de paginas, estoy aprendiendo por so mis consultas
Saludos
Gonzalo
Hola Maximiliano.
Me puedes ayudar con un problema que tengo?
Mira pongo en css en background-image:url(abc.gif), una imagen de fondo, le aplico a un div, se ve bien en IE, pero en MOZILLA NO SE PUEDE VER, NO SE QUE PASA.
como puedo hacer o que codigo poner para que funcione en los dos navegadores.
Saludos
Gonzalo