0
Gracias

Unas palabras de agradecimiento nunca están de más.

Webmaster - Adaptar una página Web a diferentes resoluciones



Adaptar una página Web a diferentes resoluciones: centrarla

Una pregunta frecuente que se encuentra en los foros es “¿Cómo adapto mi página Web a la resolución de la pantalla de los usuarios?” ¿Qué resolución debo elegir?

La solución

La solución consiste en utilizar tamaños relativos en la página (que cambien según el tamaño de la ventana y de la pantalla de los usuarios).

Lo mas común es utilizar la etiqueta body. Pero también podemos utilizar div#corps u otro.

Para adaptar el tamaño de la página, debemos utilizar el siguiente código CSS:

body{width:100%;}


Con este código la página ocupara el 100% de la ventana, cualquiera sea su tamaño.

Evidentemente podemos definir el tamaño que deseemos (90%, 80%, etc.)

Si definimos un tamaño más pequeño, podemos centrar la página con "margin:auto".

Nota

/!\ Atención: es necesario definir el tamaño en porcentaje (%) y no en em u otra unidad relativa, ya que % corresponde a un porcentaje en relación al tamaño de la ventana, en cambio las unidades em corresponden a la altura de las líneas (un tamaño predefinido).

Precisiones

Si es imprescindible que tu página no sea más pequeña que cierto tamaño, puedes utilizar la propiedad min-width (no funciona bajo IE).

También puedes utilizar max-width para definir el tamaño máximo.
(No recomiendo esto ya que no es agradable tener una página que sea más pequeña que la ventana.)

Ejemplo

Una página con un ancho de 90%, centrada, y con un ancho mínimo de 600 píxeles y un máximo de 2000 píxeles:

body{width:90%;margin:auto;min-width:600px;max-width:2000px}
0
Gracias

Unas palabras de agradecimiento nunca están de más.

Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net y director digital en el Grupo Figaro. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.

1 Comentario