Eu passei anos constrindo web pages, quase que brigando com os designs, e eu e meu cologa de agecia já discutiamos muitos destes conseitos antes mesmo de chamarmos isso de design responsivo.
Eu sempre defendi usar SVG, web fonts, mobile first.
Eu passei anos constrindo web pages, quase que brigando com os designs, e eu e meu cologa de agecia já discutiamos muitos destes conseitos antes mesmo de chamarmos isso de design responsivo.
Eu sempre defendi usar SVG, web fonts, mobile first.
Qual a melhor maneira de criar um site responsivo? Utilizando Grid ou Flexbox? Utilizei Flexbox e consegui uma certa responsividade já de inicío sem preparar um mediaquerry para isso.
Acredito que não exista a melhor maneira (Grid ou Flexbox) para um site responsivo, isto vai depender muito das necessidades do layout nessa responsividade. Muitas vezes apenas o flexbox atende muito bem essa responsividade. Por exemplo numa seção Image-Text, onde no desktop é lado a lado, e no mobile, forma colunar, e ai pode-se usar um media query se se desejar para alterar o flow do flex, ou apenas definir uma propriedade de wrap.
Outros casos, por exemplo, que já aconteceu comigo, no layout desktop, de uma forma geral, era um Image-Text lado a lado, porém no mobile era tipo Banner-Hero (texto com uma imagem de fundo), e ai nesse caso eu optei por usar Grid, com uma propriedade de grid-area.
@renatoRea se desejar, consigo compartilhar o exemplo/estudos que realizei na época para estudar um pouco mais essas propriedades para desenvolver essas seções de landing page.
Agradeço @andretoniati, toda ajuda e estudo são bem-vindos.
Segue o link do CodePen
Qualquer dúvida, ou sugestão para melhorar compartilhe :D
Concordo com o @andretoniati.
E acrecento, que não exite um melhor, o que existe são ferramentas e suas features e limitações.
O que vc precisa ter em mente é que elas exitem e como usala.
No meu caso em particular uso muto bootstrap, ele usa uma extrutua de flex para crias suas colunas, mais utiliso muito grid principlamente para criar que se sobrepoem, exite um procriedade css break-inside: avoid;
onde as box do grid comseguem se sobrepor com isso comsigo criar areas que se ajustão com o conteudo e sem a nessecidade de por exp posicioar por absoluto determinados itens, e ainda podendo espandir o contexto sem que nada escape para fora.