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

Noviembre 2016


Las personas, en la actualidad, tienen más opciones de conectarse a Internet. Pueden hacerlo desde su teléfono móvil, PC o tableta. Pero, cada dispositivo tiene diferentes características y resoluciones de pantalla que hacen que la visualización de un una página web sea diferente. Por lo tanto, los sitios web deben adaptarse a las diferentes resoluciones de pantalla.

Cómo redimensionar automáticamente una página web a diferentes resoluciones

La solución consiste en utilizar dimensiones relativas en la página, que se modificarán según el tamaño de la ventana y de la pantalla de los usuarios.

Lo más común es utilizar la etiqueta body. Pero, también puedes utilizar la etiqueta div#corps.

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

body{width:100%;}


Con este código la página ocupará toda la ventana (100%), cualquiera sea su tamaño. Obviamente, puedes definir el tamaño que desees (90%, 80% u otro). Si defines un tamaño más pequeño, puedes centrar la página con margin:auto.


Atención: es necesario asignar el tamaño en porcentaje (%) y no en em u otra unidad relativa porque % corresponde al porcentaje en relación al tamaño de la ventana y las unidades em asignan la altura de las líneas (un tamaño establecido).

Precisiones para adaptar el tamaño de la página

Si es imprescindible que el tamaño tu página no sea menor que uno determinado, puedes utilizar la propiedad min-width (no funciona en Internet Explorer).

También puedes emplear max-width para definir el tamaño máximo. Aunque no es recomendable, 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 al 90%, centrada, ancho mínimo de 600 píxeles y máximo de 2000 píxeles:

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


Consulta también :
El documento «Cómo adaptar una página web a diferentes resoluciones» de CCM (es.ccm.net) se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo siempre y cuando respetes las condiciones de dicha licencia y des crédito a CCM.