Webmaster: Adaptar una página web a diferentes resoluciones

Como bien sabemos, la resolución de la pantalla es un factor importante a tener en cuenta para conseguir una buena calidad de imagen. Ahora bien, ¿cómo adapto mi página web a la resolución de la pantalla de los usuarios? ¿Qué resolución debo elegir? En los dos últimos años, las estadísticas de resolución de pantalla de los cibernautas indican que la más utilizada es 1920x1080 píxeles, pero existen muchas más. En este artículo te enseñamos qué debes hacer para ajustar tu sitio web a distintas resoluciones.

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

Como no conocemos la resolución de las pantallas de todos los usuarios que van a visitar nuestra página web, una posible solución es emplear las unidades relativas de CSS, en este caso emplearemos el porcentaje para ajustar el tamaño de la página a la medida deseada, de tal forma que se adapte a la ventana y a la pantalla de los usuarios.

Lo más común es utilizar la etiqueta body:

body{width:100%;}

Con esta línea de código la página va a ocupar el 100% de la ventana, cualquiera que sea su tamaño, y podemos definir el tamaño que queramos (90%, 80%, etc.) También es posible centrar la página respecto al contenedor y no a los contenidos con la propiedad margin: 0 auto. Esta función ajustará a 0 los márgenes superior e inferior y también los laterales de manera automática.

Atención: se debe definir el tamaño en porcentaje (%) y no en em, ya que nos interesa asignar un porcentaje en relación al tamaño de la ventana. Recordemos que las unidades em definen 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 para determinar la anchura mínima y que width no sea inferior de lo deseado. Recuérdese que esta propiedad no funciona en Internet Explorer.

También puedes utilizar max-width para definir el tamaño máximo. Pero, cuidado, ya que puede dar lugar a que la página sea más pequeña que la ventana, rompiendo así la estética de tu sitio web según la pantalla que tenga el usuario.

Ejemplo

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

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