Unidades relativas y porcentuales

sisi escribió esto a las 11:47

Voy a hablar aquí de los tres tipos de unidades que utilizo:

  • Unidades relativas:
    • Píxeles: px . Es “relativa” puesto que el tamaño que se ve depende del tamaño del pixel de tu monitor y, por tanto de la resolución de tu pantalla. Es pues “relativa entre dispositivos”.
    • em. “Más relativa” que la anterior. 1em es la altura del tamaño de fuente del elemento en que se utiliza. Así, si definimos el ancho de un elemento con 13em,
      #mielemento {
      width:13em;
      }

      lo que decimos es que su ancho es 13 veces la altura de la fuente que se emplea dentro de ese div (que puede estar definida explícitamente o ser un valor heredado)
  • Unidades porcentuales. No es lo mismo definir unas medidas en em, que como hemos visto se refiere a la altura de la fuente, que definirlas de forma porcentual.
    #mielemento {
    width:13%;
    }

    Aquí lo que decimos es que mielemento tiene una anchura del 13% de su elemento padre. Las medidas porcentuales siempre están referidas a otras medidas anteriores y no siempre al tamaño de la fuente (aunque también se pueden establecer el tamaño de las fuentes con medidas porcentuales, referidas estas al primer tamaño definido o al predeterminado).

Nunca uso unidades absolutas como pt, mm o cm
Sigue leyendo “Unidades relativas y porcentuales”…

Comparte este artículo:
  • Meneame
  • del.icio.us
  • Digg
  • Facebook
  • TwitThis
  • Google
  • Live
  • E-mail this story to a friend!
  • Print this article!

Tamaño de fuente relativo

sisi escribió esto a las 11:56

Doy ahora un paso más y me decido a cambiar mi css y definir los tamaños de fuente en unidades relativas.
¿Relativas? ¿Relativas a qué?
Al principio estaba convencida de que al menos tendría que definir un tamaño de fuente en pixels para que el resto se definiera de forma adecuada con respecto a éste. Pero no es así. Los navegadores que he probado: IExplorer, Firefox (Windows yLinux) y Opera (Windows y Linux) generan un tamaño de fuente por defecto de 16px. Así que las medidas pueden ser relativas con respecto de este tamaño ya desde el prinicpio, desde la definición de fuente en la etiqueta “body”.
¿Y por qué tengo que definir un tamaño relativo de fuentes si tanto en Firefox como en Opera puedo variar siempre el tamaño de las fuentes a voluntad?
Pues porque si tenemos una definición de tamaño en pixels IExplorer no nos dejará variar el tamaño de fuente, con el consiguiente problema de accesibilidad para los usuarios de este navegador.
¿Y por qué no cambian de navegador?
Algunos no podrán, otros sencillamente no querrán … Este blog tiene un número muy pequeño de visitas, pero me gustaría que si alguien no accede a sus contenidos sea porque no desea hacerlo y no porque no pueda.
¿Y por qué los tamaños que has definido ahora acaban todos en 6 o en 2?
La explicación la encontré aquí:

Así nos enteramos de que:

  • El tamaño de fuente del 76% equivale a 12px.
  • Para Opera, un tamaño de 75% equivale a 11px y no a 12px. Subir el tamaño a 76% uniformiza el resultado a 12px para los tres navegadores.
  • El asunto está en que la definición de body se haga en % mientras que la del resto de tamaños puede hacerse en em. Aunque las dos formas serían equivalentes, parece que así nos evitamos resultados indeseados … pero esto no lo tengo tan claro …
  • Y, por supuesto hay que probar y probar porque los resultados del redondeo pueden ser bastante extraños.
Comparte este artículo:
  • Meneame
  • del.icio.us
  • Digg
  • Facebook
  • TwitThis
  • Google
  • Live
  • E-mail this story to a friend!
  • Print this article!