Artigos de Tecnologia e Negócios > Front-end

Como lidar com os limites de resolução em sites responsivos?

Sérgio Lopes
Sérgio Lopes
Imagem de destaque

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:

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.

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1233 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1233 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1233 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1233 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas