El manejo de los tamaños y las medidas en HTML, es uno de los temas más delicados cuando convertimos nuestro PSD a HTML y pretendemos respetar 100% el diseño original.
El CSS nos da muchas formas diferentes para indicar las medidas y los tamaños de los elementos en el página.
En este artículo, te explicaré las diferentes formas de administrar las medidas para que tus páginas sean un reflejo perfecto del diseño original.
Las Unidades de Medida en CSS se utilizan para definir la altura, anchura y márgenes de los elementos, y para establecer el tamaño de las tipografías o fuentes.
Estas unidades de medida están divididas en 2 grupos: las absolutas, y las relativas.
Las medidas relativas son las que definen un valor en relación a otra medida, lo que significa que para obtener el valor real, se debe realizar alguna operación matemática con el valor de referencia.
Las medidas absolutas, son las que definen su valor de forma completa y concreta; su valor es directamente el indicado.
Las Unidades Relativas
A continuación un listado de las unidades relativas y su objeto de referencia.
- em, es relativa al tamaño de letra empleado. Aproximadamente el valor «1 em» se aproxima al ancho de la letra «M» mayúscula, del tipo de letra que se esté usando.
- ex, es relativa a la altura de letra «x» minúscula del tipo de letra que se esté usando.
- px, es relativa respecto a la pantalla del usuario.
Las unidades em y ex no son originarias del CSS, sino ue se vienen utilizando desde hace mucho tiempo en el ámbito de las tipografías.
En el siguiente ejemplo, se especifica que el tamaño de letra del texto debe ser del 90% del tamaño por defecto que depende de cada navegador.
Ej:
[sourcecode=»css»]
body {
font-size: 0.9em;
}
[/sourcecode]
Es como multiplicar el tamaño por defecto del texto usado, por el valor de em.
O sea, supongamos que estamos usando un cuerpo de 10px por efecto, entonces 10x 0.9 = 9px.
Al principio parece complicado utilizar medidas relativas, pero al final siempre se debe tener en cuenta la referencia de la unidad para obtener su valor real.
La ventaja de esto, es que si el usuario decide aumentar el tamaño de letra por defecto de su navegador, los demas tamaño aumentarán de forma proporcional.
Por ejemplo, si queremos definir que los títulos sean 2 veces más grandes que los textos normales, debemos definir un tamaño de texto por defecto en el <body>, y luego en la etiqueta de titulo <h1>, colcarle el valor «2 em».
EJ:
[sourcecode=»css»]
body {
font-size: 10px;
}
h1{
font-size: 2em;
{
[/sourcecode]
Las Unidades Absolutas
En las unidades absolutas, se definen los valores de forma completa y concreta, ya que los valores no se calculan en base a otra valor de referencia.
Aquí la lista de unidades absolutas:
- in, pulgadas («inches»), 1 pulgada = 2.54 centímetros
- cm, centímetros
- mm, milímetros
- pt, puntos (1 punto equivale a 1/72 de pulgada, o sea, 0.35 mm)
- pc, picas (1 pica = 12 puntos, o sea, unos 4.23 mm)
Porcentajes
Otra variante relativa para definir medidas, son los porcentajes.
Estos serian similares a la unidad «em» ya que un valor del 90%, equivale a un 0.9em.
Ejemplos:
[sourcecode=»css»]
body {
font-size: 1em;
}
h1 {
font-size: 200%;
}
h2 {
font-size: 150%;
}
[/sourcecode]
Los porcentajes también se utilizan para establecer la anchura de los elementos:
En CSS:
[sourcecode=»css»]
div#contenido {
width: 600px;
}
div.principal {
width: 80%;
}
[/sourcecode]
En HTML:
[sourcecode=»html»]
[/sourcecode]
En este caso, el DIV padre #contenido, mide 600px de ancho, y el DIV #principal que está dentro del DIV #contenido, mide 80% el ancho de su padre, o sea, unos 480px reales.
Consejos
Por lo general es mucho mejor utilizar medidas relativas ya que mejora la accesibilidad de la página permitiendo que los documentos se adapten fácilmente a cualquier medio y dispositivo.
Como ves, es un tema bastante importante el de las unidades de medida.
Te recomiendo que practiques con las unidades relativas, para obtener todos sus beneficios.
Saludos!
Cristian
Información útil, pero pensé que ibas a hablar de algún truco o hack preciso para gestión del crossbrowsing… saludos desde Perú