Fiz uma postagem pedindo perguntas sobre o tema responsividade CSS, elenquei as melhores pra falar das respostas com um pouco mais de detalhe aqui.
Bora?
Existem boas práticas arquiteturais relacionadas a responsividade? Quais?
Bem, são 8 práticas (que eu lembrei):
1- Evitar uso de height
Quando os elementos não cabem mais nos seus containers, na grande maioria das vezes eles vão quebrar pra linha de baixo. Texto se comporta assim por padrão, mas é o comportamento esperado de um container flexbox com flex-wrap: wrap; , por exemplo.
2- O conteúdo dita o breakpoint e não o contrário
Pode ser pior pra um layout definir breakpoints prematuramente, ao invés disso, defina apenas breakpoints onde o site quebra.
Inclusive, mais sobre isso no meu artigo sobre breakpoints:
3- Unidades estáticas pra limites ex max/min-height/width, relativas e intrínsecas e relativas pra width e height
Unidades estáticas são aquelas que representam sempre a mesma coisa independente do contexto, isso faz delas perfeitas pra impor limites. O seu formulário, card ou botão não podem esticar infinitamente numa tela ultra-wide e nem diminuir até ficar ilegível em uma tela pequena. Faz sentido propriedades como min-width e max-width (ou clamp() alternativamente) receberem valores em px ou similares.
Já pra width e height em muitos casos faz sentido unidades relativas como % (relativo ao pai) ou vw (relativo à largura do viewport), pra que esses aumentem ou diminuam proporcionalmente.
Essas duas ferramentas juntas criam componentes sempre legíveis por respeitar os limites, mas que acompanham o tamanho do viewport de forma proporcional.
4- Flexbox apenas onde não der pra usar grid
Flexbox pode causar CLS (Cumulative Layout Shift) pra conteúdo dinâmico, que é o fenômeno do seu layout chacoalhando enquanto carrega dinamicamente. Jake Archibald escreveu um artigo ótimo sobre isso e que continua bem atual.
5- Grid pra conteúdo dinâmico
Pelos mesmos motivos citados acima. Como o grid decide o layout dos elementos filhos, o layout permanece íntegro mesmo que eles ainda estejam carregando (dependendo de como tu criar, claro).
6- Responsividade por elemento
Como citado acima, todo elemento tem sua própria unidade relativa de escala e estática de limite. Além das questões de limites, todo componente tem que ser pensado pra sobreviver do menor viewport ao infinito. Isso faz com que a página seja responsável apenas por orquestrar componentes já responsivos.
7- Containers com wrapping que fazem a gestão do layout, não media query
O foco é a proporcionalidade e resiliência, não pixel perfect. O navegador e os algoritmos de tecnologias modernas de layout fazem uma ótima distribuição automática de elementos, breakpoints não.
8- Padding e gap pra espaçamento
Paddings com box-sizing: border-box; e gap no flexbox e grid não incrementam no tamanho do layout quando utilizados, margin sim. O bug de "meu layout tem scroll horizontal!!" geralmente é causado por margens e width com unidade absoluta.
Dúvida: já ouvi um debate sobre usar media query com PX ou REM. Qual tu acha melhor e pq?
rem relativo ao root font size, segue uma escala quando incrementado e seu valor base pode ser redefinido. Um :root { font-size: 150%; } pode mudar o que suas media queries significam.
Media queries por sua vez alteram o layout em um ponto específico da largura dele. Específico x relativo? Não faz sentido pra mim, ein?
Pode me falar mais sobre os minmax da vida? quando usar? e como usar da forma certa?
- Hoje só CSS grid tem suporte pra
minmax(), um ótimo exemplo desse layout é o layout RAM (Repeat, Auto-fit, Minmax), escrevi mais sobre isso no meu artigo sobre layouts avançados:
-
min()pega o menor entre dois valores, um ótimo exemplo é o layout full bled. Tem um artigo inteiro sobre esse layout no blog do Josh Comeau
- O
max()pega o maior entre os dois valores, interessante pra layouts que são fluidos mas tem um limite de crescimento.
Em todos esses casos é interessante que pelo menos um dos valores sempre seja relativo.
Outra coisa ja abusando, quando eu uso REM, que é relativo ao fontroot e quando eu uso EM que é relativo ao pai? consegue me dar um exemplo onde eu queira usar eles?
O em é proporcional ao font-size do elemento pai se for aplicado na propriedade font-size mesmo. Se aplicado à outra propriedade como width, pode ser relativo ao font-size do próprio elemento.
Um caso de uso que eu adoro são ícones de fonte. Num caso que o ícone precisa ser maior que o texto, mas crescer junto com ele, você pode dizer que o ícone é, por exemplo 1.2rem, que é 1.2 x o valor do font-size do texto.
Um exemplo prático com padding proporcional usando rem:
Quais outros aspectos além de “caber bem na tela” tem a responsividade?
Legibilidade e integridade.
Menos de 60 caracteres de largura não deixam o texto legível, mas fazem caber. A ordem de leitura precisa ser mantida, elementos importantes não podem ser ocultos, integridade.
As vezes a gente não consegue garantir todos os layouts, mas precisamos no mínimo garantir a experiência de conteúdo, focando nos dispositivos que os clientes mais usam.
Isso lista nenhuma de site de top 10 breakpoints vai dizer.
GTM, Clarity, Cloudwatch RUM e afins possuem esse tipo de informação que podem basear priorizações de layout até remoção de polyfills inteiros.
Hora da sinceridade
E ai, o que acharam? Eu aprendi muito respondendo essas perguntas e adoraria que vocês mandassem mais aqui!
Vocês responderiam diferente? Bora conversar!
Top comments (7)
Muito bom 🤩. Eu só acho que nunca essa quantidade de informação vai entrar na minha cabeça kkkk, ainda mais agora como Fullstack. Hoje em dia eu só vejo uma chance de ser especialista trabalhando para os gringos.
Já vi gente que diz quebrar a regra de "Evitar uso de height". Eu sempre sigo essa regra. Na hora só fiz uma cara 👀 e segui a vida
Já escrevi um post sobre unidades relativas e estáticas, pode complementar o conteúdo.
Chocado com a informação de que Flexbox pode causar CLS. Sempre uso flexbox, e quando não dá mais, mudo pra grid. Vou ler o artigo linkado ali.
Muito boa a ideia do artigo de pedir as dúvidas das pessoas 😊
No mais, fiquei feliz de ter aparecido por aqui hahahaha
Obrigado pela contribuição inclusive, ansioso pelo próximo respondendo perguntas lá com a última thread
Só artigo foda! parabéns!
Obrigado mano!
Esclareceram algumas duvidas minhas, mas umas ainda perduram:
1° Envolvendo a responsividade para celular fold, como deve ser feito, fico perdido sobre o grid do celular e como deixar tudo legível e bonito KKKKK?
2° Sobre tablete, eu tenho eles como arque inimigos, nunca sei como deixar o layout, pois sempre ficam um mix entre celular e desktop que nunca me agrada, tem alguma dica?
Desde já agradeço por compartilhar seu conhecimento, muito obrigado 🦤.
Opa, um prazer responder:
1º Se você programa web você não precisa se preocupar com isso. Essa API é específica de mobile e quem se adapta a ela é o navegador, não a página web. Se fosse a página, seria impossível a pessoa que adquirir esse celular acessar a maioria dos sites.
2º A dica é que eles são dispositivos de toque, então tudo bem se parecerem com uma versão mais larga do celular. É difícil achar exemplos de UI pra tablet, mas em sua maioria é só redistribuir o layout como se fosse uma versão menor de web e pensar nas experiências voltadas pra toque (elementos interativos maiores, ausência de hover, teclado virtual ocupa espaço na tela, etc)