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
 
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
 
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
 
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 👏🏻👏🏻🙏🏻