Cómo adaptar una página web a diferentes resoluciones
La resolución de la pantalla es un factor importante a tener en cuenta para conseguir una buena calidad de imagen. A continuación, te enseñamos a ajustar una página HTML a cualquier pantalla: PC, móvil, etc. ¡Sigue leyendo!
¿Cómo hacer que mi página web se adapte 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 qué width no sea inferior de lo deseado. Recuerda 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}
¿Tienes más preguntas sobre páginas HTML? Consulta nuestro foro de discusión