Menu

Webmaster: Adaptar una página web a diferentes resoluciones

Haz una pregunta

Adaptar una página web a diferentes resoluciones: centrarla


Una pregunta frecuente que aparece en los foros es ¿Cómo adaptar una página web a la resolución de la pantalla de los usuarios? ¿Qué resolución elegir?

Cómo adaptar una página web a diferentes resoluciones

La solución consiste en emplear tamaños relativos en la página (que se adapten al 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, tenemos que utilizar el código CSS: 

body{width:100%;}


Con este código la página va a ocupar el 100% de la ventana, cualquiera sea su tamaño. Evidentemente podemos definir el tamaño que queramos (90%, 80%, etc.) Si definimos uno más pequeño, podemos centrar la página con margin:auto.

Nota

/!\ Atención: se debe definir el tamaño en porcentaje (%) y no en em o alguna otra unidad relativa, ya que % designa un porcentaje en relación al tamaño de la ventana, en cambio las unidades em designan la altura de las líneas (un tamaño predefinido).

Precisiones

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

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

Ejemplo

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

body{width:90%;margin:auto;min-width:600px;max-width:2000px}
Jean-François Pillou

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.

Más información sobre el equipo de CCM

Consulta también