DEV Community

Cover image for Responsividade CSS 101 - Breakpoints

Responsividade CSS 101 - Breakpoints

Camilo Micheletto on October 03, 2023

Responsividade é a capacidade de um layout se adaptar ou "responder" as mudanças de viewport. Uma das formas mais comuns de se fazer isso era usand...
Collapse
 
matheusfilg profile image
Matheus Filgueiras •

Artigo insano e complexo, mudou minha forma de ver responsividade como algo simples devido a frameworks e hacks, tem muito o que explorar e aprender em como atender as necessidades de determinados layouts

Parabéns 💜

Collapse
 
lixeletto profile image
Camilo Micheletto •

Graças a muitas perguntas que rolaram no twitter (e eu vou respondendo por aqui com o tempo). É um mundo a parte, mas vale a pena se debruçar

Collapse
 
mouro profile image
Rodrigo Luiz •

Boa tarde, Camilo, pode explicar porque usas a unidade de medida ch?
Por exemplo, padding: 2ch, tenho usado px, rem, em, porem nao sei qual seria a melhor prática, um padrão para qualquer tipo de layout e parabéns por mais conteúdo maravilhoso.

Collapse
 
lixeletto profile image
Camilo Micheletto •

A melhor prática é você usar sabendo por que usou, entende?

Eu gosto de usar ch no padding e na margem pois como ele representa a largura do caractere 0, eu sei de cabeça + ou - como vai ficar, é previsível pra mim.

Eu não usaria em produção pra esse caso, até porque provavelmente a empresa tem seu próprio design system com espaçamentos já definidos;

Associar unidades CSS diretamente à elementos ou propriedades é um erro. Aprender pra o que elas servem e defender seus casos de uso é a forma mais produtiva de abordar.

Collapse
 
raulferreirasilva profile image
Raul Ferreira •

Não me canso e ler seus posts, se tá doido, ansioso pra por em pratica tudo que estou aprendendo e ter duvidas para trazer aqui KKKKK, muito obrigado por compartilhar seu conhecimento de uma forma tão clara e bem escrita 🦤.

Collapse
 
lixeletto profile image
Camilo Micheletto •

Quando por em prática, se for sua vibe, escreva sobre! Ficarei feliz ajudar e compartilhar

Collapse
 
gustavohqo profile image
Gustavo •

Cara, ce tá de parabéns! o artigo ficou muito bom! Me deu muitas ideias, você merece um abraço!

Muito obrigado!

Collapse
 
lixeletto profile image
Camilo Micheletto •

Opaaa, que honra mano!

Collapse
 
jessilyneh profile image
Jessilyneh •

Salvando pra ler mais tarde e tenho certeza que ficou muito foda

Collapse
 
lixeletto profile image
Camilo Micheletto •

Obrigado queridíssima!

Collapse
 
gabrielgomeso profile image
Gabriel Gomes de Oliveira •

Quando você usa

grid-template-columns: repeat(
    var(--index, auto-fit),
    minmax(320px, 1fr)
  );
Enter fullscreen mode Exit fullscreen mode

E o --index só é definido no breakpoint de min-width: 1320px, significa que o var() vai ver se tem valor pra index, se não vai jogar pra auto-fit?

Collapse
 
lixeletto profile image
Camilo Micheletto •

Exatamente!
Se você é familiarizado com Javascript, é quase como:

const = gridTemplateColumns(repeat(index || 'auto-fit'), minmax())
Enter fullscreen mode Exit fullscreen mode
Collapse
 
gabrielgomeso profile image
Gabriel Gomes de Oliveira •

Muito bom! Ótimo artigo, deu pra entender bem!! Não tinha noção que o var() fazia isso tbm, irado

Thread Thread
 
lixeletto profile image
Camilo Micheletto •

Ele é poderosíssimo! Quero muito escrever um artigo só sobre ele

Collapse
 
eriveltondasilva profile image
Erivelton da Silva •

Tbm mudou a minha forma de pensar responsividade, parabéns pelo trabalho, meu irmão 👏🏻👏🏻🙏🏻