-1

Suponhamos que tenha um folha de CSS razoavelmente grande e ao terminar a estilização do HTML, vou fazer a parte responsiva da página.

Meu problema é que quando começo a utilizar as medias query, toda a estilização e programação que fiz para os elementos da pagina começam a interferir na media query que estou criando, ficando muito difícil de fazer as coisas. Tenho que fazer a maioria dos códigos de novo dentro da media query e isso é muito complicado. Isso porque tem sempre que tentar descobrir o porque dos códigos não estão funcionando direito, tendo que refazer 50% de tudo dentro da query.

Queria saber se tem uma melhor prática para que isso não aconteça e que tenha que escrever e mudar o que realmente quero mudar na media query

3
  • sem um exemplo prático é difícil ajudar, faça um exemplo pra entendermos, pq não tenho esse problema... já tentou usar algum framework que já trate isso, como bootstrarp ou material? 19/10/2018 às 2:40
  • Vc esta colocando as suas regras @media com sendo as primeiras coisas do seu CSS, ou esta colocando nas ultimas linhas do CSS?
    – hugocsl
    19/10/2018 às 10:44
  • Hugo, estou usando no final do CSS.
    – Tony Ivan
    19/10/2018 às 11:04

1 Resposta 1

1

Uma dica que te dou é tentar planejar seu website/sistema ao máximo antes de criá-lo, pois dessa forma você conseguirá determinar melhor os paddings, margins, floats, flexboxs, etc, fazendo com que na hora de ajustar nas medias querys, não tenha tanto "re-trabalho".

Use por exemplo as seguintes medias querys:

// Dispositivos extra small (telefones em modo retrato, com menos de 576px)
// Sem media query para `xs`, já que este é o padrão, no Bootstrap.

// Dispositivos small (telefones em modo paisagem, com 576px ou mais)
@media (min-width: 576px) { ... }

// Dispositivos médios (tablets com 768px ou mais)
@media (min-width: 768px) { ... }

// Dispositivos large (desktops com 992px ou mais)
@media (min-width: 992px) { ... }

// Dispositivos extra large (desktops grandes com 1200px ou mais)
@media (min-width: 1200px) { ... }

Pense sempre na largura mínima de cada uma delas, antes de atingir o "breakpoint", pois dessa forma, você não faz vários ajustes dentro de uma media query para depois que redimencionar mais um pouco, descobrir que precisa de outro ajuste, um exemplo: @media (min-width: 1200px) { ... }, você utiliza 1200px como base para sua responsividade e não por exemplo 1920px, sendo assim, ajustando para 1200px que é o breakpoint, você saberá que todas as demais resoluções acima disso estarão funcionando.

Dica Bônus: Não sei se você usa algum tipo de Framework CSS como Bootstrap por exemplo, mas eu recomendo e muito a utilização, ainda mais pela questão dos Grids e das demais classes que já ajudam na responsividade na própria escrita do código HTML, sem que você precise se esforçar tanto com várias linhas de código depois via CSS puro.

Espero ter ajudado, forte abraço e sucesso!

13
  • Tendi amigo... Não uso nenhum flamework, to começando agora e antes de começar com flamework, quero aprender a fazer sem precisar deles primeiro... Mas essa metodologia que vc ta falando ai é do bootstrap né?
    – Tony Ivan
    19/10/2018 às 11:01
  • Não, essa metodologia que passei é de médias querys normais, claro que se usar o bootstrap ele vai ajudar, porém na parte das classes que você coloca no HTML, tirando isso, tudo o que eu te passei da para fazer sem o bootstrap. 19/10/2018 às 11:56
  • Tendi... To fazendo aqui do jeito q c falou, to indo de 1366px pra baixo... So que quando chega em 1050 ja começa a quebrar as coisas, ai tenho que colocar uma media query ja ai... No designer dos meus elementos nao ta dando pra colocar so as medias que vc ta passando ai essas 4... pq existem pontos de quebra nessa intersecções, saca?
    – Tony Ivan
    19/10/2018 às 12:10
  • Porque você não usa as media querys que te passei? Você precisa ajustar apenas essas 4 (quatro): @media (min-width: 576px) { ... } @media (min-width: 768px) { ... } @media (min-width: 992px) { ... } @media (min-width: 1200px) { ... } Caso contrário, você fez algo errado na hora de codificar seu site/sistema 19/10/2018 às 13:46
  • eu fiz um OPTIN, da uma olhada... so usei 2. pastebin.com/raw/aLrjQSxa
    – Tony Ivan
    19/10/2018 às 14:03

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .