Repasando las medidas y tamaños en CSS

Posted on abril 7, 2008. Filed under: General, Información, Programación | Etiquetas: , , , , , |

Los estilos CSS nos dan varias opciones a la hora de ajustar el formato de presentación de los elementos de una página web, así se trate de texto, imágenes, etc. Hay varios tipos de etiquetas para especificar tamaños y medidas que nos serán de mucha utilidad.

Desde csslab.cl, Jorge Epuñan nos trae un repaso de los estándares dispuestos por el w3c, ideal para que refresquemos estos conceptos (y para que aquellos que están comenzando con CSS se pongan a tono).

Medidas y tamaños en CSS

  • Absolutas
    • in (pulgadas)
    • cm (centímetros)
    • mm (milímetros)
    • pt (puntos)
    • pc (picas)
    • px (pixeles)

Las unidades absolutas permiten un control exacto de la apariencia de la página, siempre y cuando se visualice en el entorno para la cual fue diseñada.

A modo de ejemplo, al utilizar px se visualizará diferente en cada resolución de pantalla y la plataforma del usuario que está desplegando ese contenido. Peor si utilizamos pt, ya que depende del tamaño del punto de la resolución de la pantalla.

  • Relativas
    • em
    • ex

Las unidades relativas dependen de la altura del elemento en el que se usa, aunque en la práctica, es el tamaño de texto definido en las preferencias del navegador.

Con esto, quien está definiendo estilos mantiene un control relativo ya que depende directamente del tamaño de fuente por defecto del usuario (1em), y a partir de eso, cuanto más grande (1.2em por ej) o menor (0.7em) se visualizará esa letra.

Además, permiten su uso en cualquier propiedad de medida (margin, padding) lo que finalmente muestra un diseño proporcionado a la configuración del usuario (por ejemplo, proporcionado entre una pantalla widescreen de 17″ y un iPhone).

  • Porcentaje
    • %

No recomendado para tipografías, ya que su control no es fácilmente determinado por quien construye los estilos ya que necesita de un elemento de referencia (100%).

Sólo recomiendo su uso en cajas de layout, determinados por el ancho de la resolución del usuario.

Tabla de equivalencias:

Repasando las medidas y tamaños en CSS

Fuente: csslab

Anuncios

Make a Comment

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Liked it here?
Why not try sites on the blogroll...

A %d blogueros les gusta esto: