ENTRAR MATRICULE+SE

TODOS OS NOSSAS PARA DEV

CURSOS FORMAÇÕES EMPRESAS EM 5T6

Artigos > Front-end

Como lidar com os

limites de resolução em
sites responsivos?

Sérgio Lopes
Atualizado em 30/09/2021

COMPARTILHE

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.

Confira neste artigo:

Entendendo os sites únicos e
responsivos
Sites responsivos no mundo ideal
Então o que devo fazer no mundo
real?

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.

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.

Sérgio Lopes

Sérgio é diretor e líder do time de diversos times no

Grupo Caelum, formado em Ciência da Computação
pela USP. É reconhecido por sua atuação em Front-
end, Performance, Mobile e Arquitetura de software
e tem vasta experiência com ensino, tanto presencial
quanto online. Gerencia os projetos internos da
empresa e atua na definição de rumos dos produtos
e da empresa em geral.

Artigo Anterior Próximo Artigo

Do zero para Desafio JavaScript

programador front- entre duas amigas
end

Leia também:
CSS` Grids e tabelas com responsividade na
Web
A arquitetura do novo site da Alura

Quais impactos de performance ao usar

serviços externos de fontes?
Do Ceará para São Paulo: a trajetória da aluna
Nathalia

Veja outros artigos sobre

Front-end

Quer mergulhar em
tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO

escreve pessoalmente, com insights do
mercado de trabalho, ciência e
desenvolvimento de software

Escreva seu email

ME INSCREVA

Nossas redes e apps

Institucional

Sobre nós

Trabalhe conosco

Para Empresas

Para Escolas

Política de Privacidade

Compromisso de Integridade

Termos de Uso

Status

A Alura

Como Funciona

Todos os cursos

Depoimentos

Instrutores(as)

Dev em QTR

Conteúdos

Alura Cases

Imersões

Artigos

Podcasts

Artigos de educação

corporativa

Fale Conosco

Email e telefone

Perguntas frequentes

Novidades e Lançamentos

mariaquinyas@gmail.com ENVIAR

CURSOS

Cursos de Programação
Lógica | Python | PHP | Java | .NET |
Node JS | C | Computação | Jogos | IoT

Cursos de Front-end
HTML, CSS | React | Angular | JavaScript |
jQuery

Cursos de Data Science

Ciência de dados | BI |
SQL e Banco de Dados | Excel |
Machine Learning | NoSQL | Estatística

Cursos de DevOps
AWS | Azure | Docker | Segurança | IaC |
Linux

Cursos de UX & Design

Usabilidade e UX | Vídeo e Motion | 3D

Cursos de Mobile
React Native | Flutter | iOS e Swift |
Android, Kotlin | Jogos

Cursos de Inovação & Gestão

Métodos Ágeis | Softskills |
Liderança e Gestão | Startups | Vendas