Artículos de Tecnología > Front End

¿Cómo lidiar con los límites de resolución en sitios responsivos?

Sérgio Lopes
Sérgio Lopes

Imagem de destaque

Un sitio web responsivo vende la idea de adaptarse a todo tipo de resolución. Pero, ¿realmente es a todo tipo? ¿Y los extremos? ¿Pantallas muy pequeñas y pantallas muy grandes? ¿Cómo tratar? O mejor dicho, ¿cómo adoptar una estrategia pragmática al respecto?

Entendiendo los sitios únicos y responsivos

Los sitios web únicos responsivos son una respuesta a la práctica que teníamos antes de "crear un sitio web para cada dispositivo". La idea era que en el pasado la gente creaba diferentes sitios web para dispositivos móviles, computadoras de escritorio e incluso tabletas (los famosos sitios web m.).

Y eso en la práctica es imposible de hacer. Hay muchos dispositivos diferentes. Por eso preferimos la idea de un sitio web único que se adapte a diferentes resoluciones de pantalla.

Esta adaptación se realiza con diseño responsivo:

Sitios responsivos en el mundo ideal

En el mundo ideal, todos los sitios del mundo deberían adaptarse a todas las resoluciones del mundo. Ese sería un mega responsivo ideal. Eso nadie lo hace.

En la práctica, hemos establecido límites que nuestro sitio web debe soportar. Esto está dentro de los límites de nuestro público y lo que creemos que es una prioridad hoy.

Lo veo de la misma manera que hoy en día ningún sitio web es compatible con IE4 más; no tiene sentido. En el mundo ideal, admitiríamos todos los navegadores y resoluciones de pantalla posibles.

Entonces, ¿qué debo hacer en el mundo real?

En el mundo real, priorizamos soportar tanto como sea posible dentro de los criterios del proyecto.

Entonces, como no es posible admitir todos los tamaños de pantalla (este número sería infinito), es común establecer un valor máximo para admitirlo.

Entonces, el sitio web de Alura, por ejemplo, no queda bien en 2000px. Y, tampoco se ve bien en pantallas pequeñas de 200px.

El sitio es responsivo entre los límites de 320px y 1400px.

Fuera de ellos, se ve mal.Incluso me gusta hacer explícitos estos límites en código para dejar muy claro el rango de resoluciones que admite ese proyecto (y, nuevamente, cada proyecto debe priorizar a su manera):

html {   
min-width: 320px;   
max-width: 1400px; 
}

En Alura tenemos cursos de Front-end que fueron pensados para que comiences desde cero y te conviertas en un profesional de vanguardia. Es una guía de estudios con un paso a paso pensado con cariño por el equipo de Alura.

Puedes leer también:

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

  • 137 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 3 meses
  • Descuento de lanzamiento de 30%

Trimestral

Descuento de lanzamiento de 30%
  • 137 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 3 meses
US$19,90
un pago de US$29,90 US$19,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Semestral

Descuento de lanzamiento de 30%
  • 137 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro para resolver tus dudas
  • Acceso completo a la plataforma por 6 meses
US$33,90
un pago de US$49,90 US$33,90
¡Quiero empezar a estudiar!

Paga en moneda local en los siguientes países

Acceso a todos los cursos
Estudia las 24 horas, dónde y cuándo quieras
Nuevos cursos cada semana