Como lidar com os limites de resolução em sites responsivos?
![Como lidar com os limites de resolução em sites responsivos?](https://www.alura.com.br/artigos/assets/como-lidar-com-os-limites-de-resolucao-em-sites-responsivos/capa-como-lidar-com-os-limites-de-resolucao-em-sites-responsivos.png)
![Imagem de fundo azul, com desenho de uma tela de computador, um celular e um tablet.](assets/como-lidar-com-os-limites-de-resolucao-em-sites-responsivos/capa-como-lidar-com-os-limites-de-resolucao-em-sites-responsivos.png)
Um site responsivo vende a ideia de se adaptar a todo tipo de resolução. Mas é mesmo todo tipo? E os extremos? Telas muito pequenas e telas muito grandes? Como lidar? Ou melhor, como adotar uma estratégia pragmática com relação a isso?
Essa excelente pergunta foi trazida ao fórum da Alura pela Luana que estava fazendo nosso curso de Web Design Responsivo.
Entendendo os sites únicos e responsivos
Os sites únicos responsivos são uma resposta a prática que tínhamos antes de "criar um site pra cada aparelho". A ideia era que antigamente pessoas faziam sites diferentes pra mobile, pra desktop e até pra tablet (os famosos sites m.).
E isso na prática é impossível de se fazer. Há muitos dispositivos diferentes. Então preferimos a ideia de um site único que se adapte a diferentes resoluções de tela.
Essa adaptação é feita com design responsivo:
- um design base com pequenas adaptações feitas nas media queries.
![Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto](assets/guia-de-carreira-front-end-alura/guia-de-carreira-front-end-alura-banner-corpo-mobile.png)
Sites responsivos no mundo ideal
No mundo ideal, todos os sites do mundo deveriam se adaptar a todas as resoluções do mundo. Isso seria o mega responsivo ideal. Que ninguém faz.
Na prática, estabelecemos limites que nosso site deve suportar. Isso dentro dos limites do nosso público e do que acreditamos ser prioridade hoje.
Vejo da mesma forma como nenhum site hoje suporta IE4 mais; não faz sentido. No mundo ideal, suportaríamos todos os browsers e resoluções de tela possíveis.
Então o que devo fazer no mundo real?
No mundo real, priorizamos pra suportar o máximo possível dentro dos critérios do projeto.
Então como não dá pra suportar todos os tamanhos de tela (esse número seria infinito) é comum fixar um valor máximo pra suportar.
Por isso o site da Alura por exemplo não fica legal em 2000px. E, se for ver, não fica legal em telas pequenas de 200px também.
O site é responsivo entre os limites de 320px e 1400px. Fora deles, quebra.
Inclusive eu gosto de explicitar esses limites em código pra deixar bem claro o intervalo de resoluções que aquele projeto suporta (e, de novo, cada projeto deve priorizar do seu jeito):
html {
min-width: 320px;
max-width: 1400px;
}
Na Alura temos uma Formação Front-end que foi pensada para você começar do zero e se tornar um profissional de ponta. É um guia de estudos com um passo a passo pensado com carinho pela equipe da Alura.