Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS: Dimensiones y tamaños de fuente en EM

Datos de búsqueda

CSS: Dimensiones y tamaños de fuente en EM

El código CSS que se utilizará para obtener la equivalencia es el siguiente:

body, html{font-size: 62.5%;}
body {font-size: 101%;}
html>body {font-size: 100%;}
*:first-child+html body {font-size: 101%;}

Antes de crear ninguna regla la equivalencia de 1em es 16px. Por ello puede resultar un poco complicado hacer los cálculos para montar un CSS con medidas en EM.

Para simplificar el uso de dicha unidad de medida se da al elemento HTML un tamaño de fuente de 62.5%:

body, html{font-size: 62.5%;}

La siguiente cuenta aclara un poco la razón del uso del 62.5%:

(16px/100)*x=10px

Posteriormente se debe dar un tamaño de fuente del 100% al elemento BODY, aunque para Internet Explorer será de 101%, para que le salgan las cuentas:

body {font-size: 101%;}

Para los navegadores restantes si se define un 100% de tamaño de fuente, pero habrá que tirar de hack de selector CSS, para que Internet Explorer no lo pille:

html>body {font-size: 100%;}

Pero como este hack tiene efecto en Internet Explorer 7 hay dos opciones:

  • Cambiar el hack anterior a uno que excluya a todas las versiones de Internet Explorer.
  • Añadir un hack específico para Internet Explorer 7, que es lo que se ha hecho en el código expuesto al principio.

Si se opta por la primera opción, excluir todas las versiones de Internet Explorer 7, se usará esta regla:

html>/**/body {font-size: 100%;}

Y si se opta por el hack de Internet Explorer 7, se utilizará esta otra:

*:first-child+html body {font-size: 101%;}

Este documento está disponible en formato Texto OpenDocument.

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio