Olá, estudo no alura a um tempo e gostaria de tirar duvidas com vocês sobre layouts complexos. Gosto de front end e sempre busco aprender um pouco mais de css para não depender de bootstrap, recentemente fiz um site para teste usando css grid e flexbox, http://henriqueramos.com.br/ é o site, porem não entendo como funcionaria a responsividade em um site feito com css grid, a cada @media eu teria que criar novas grids? Por conta de elementos sobrepostos estou tendo bastante dificuldade com esse site que ainda estou desenvolvendo. Poderiam dar a opinião de voces e ver se estou fazendo algo de errado em relação a responsividade?
4
respostas
respostas
Layouts complexos.
Olá Henrique, tudo bem?
Se preocupando com responsividade? Já está no caminho certo! Você vai se lapidando com o tempo, aconselho a usar somente elementos tipo block, ou modificá-los para isso, assim tendo o conceito ajuda quando for trabalhar com elementos de posição fixas, absolutas e etc... Sobre sua pergunta a resposta é sim! Basicamente você trabalhara com vários breakpoints, eles são definidos de acordo com as telas mais utilizadas, mas ainda sim é possível encontrar um padrão, ex: 320px ("menor tela", iphone 5), 767px tablets e assim vai. Crie somente para 3 por hora, mobile, tablet e desktop. E sempre tome cuidado com medidas fixas! Use % para um auto ajuste. Espero ter ajudado! Qualquer dúvida estou a disposição!
Não faria mais sentido eu usar os breakpoints baseado nas necessidades do meu layout? Ja que os dispositivos nem sempre vao ter as medidas fixas que por exemplo possui no bootstrap.
Não se trata de deixar tudo bonitinho pixel a pixel, mas sim uma base, como você citou o bootstrap tem seus breakpoints em max width, dessa forma você tem um controle do layout, um computador não fica em menos de 900px, assim como um celular dificilmente passa de 700px.
Então esse meu site se eu utilizar os breakpoints do bootstrap ficaria melhor?