informação sobre media queries

[stromdh 15]

Blz galera, gostaria de uma informação a respeito de como aplicar da melhor forma as media querries.

 

Recentemente fiz um projeto onde o antigo web que estava fazendo, setou a media querie já no link pra chamar o css, dessa forma:

 

<link rel="stylesheet" href="estilo.css" media="screen and (max-width: 768px)">

 

mas quando assumi o projeto, resolvi retirar da header e deixar tudo dentro do arquivo css. Como os pc's que a empresa têm telas grande, com uma resolução bem alta, selecionei as resoluções que aparecem na extensão do Resize Window no Chrome e fiz uma querie pra cada resolução.

 

Eu fazia, testava e dava tudo certo... mas ao terminar eu repassava todo o projeto e notava que alguns elementos se desconfiguravam e mudavam seu posicionamento. eu coloquei um abaixo do outro da seguinte forma:

 

@media all and (max-width:1920px)
{       
    códigos
}
/* ------------------------------ */

@media all and (max-width:1680px)
{       
    códigos
}
/* ------------------------------ */

@media all and (max-width:1280px) and (max-height:800px)
{       
    códigos
}
/* ------------------------------ */

@media all and (max-width:1440px)
{       
    códigos
}
/* ------------------------------ */
@media all and (max-width:1366px)
{       
    códigos
}
/* ------------------------------ */

@media all and (max-width:1280px) and (max-height:1024px)
{       
    códigos
}
/* ------------------------------ */

@media all and (max-width:1024px) and (max-height:768px)
{
    códigos
}
/* ------------------------------ */

@media all and (max-width:1024px) and (max-height:600px)
{
    códigos
}
/* ------------------------------ */

@media all and (max-width:768px)
{
    códigos

}

quando eu fazia e testava dava tudo certo, mas depois que fui repassar tudo pra conferir, como falei anteriormente, bugô...

Então... queria uma orientação da melhor prática, o que é melhor de fazer quando se tem muitas resoluções ou sei lá. É o primeiro site que fiz com as media queries e quero aprender a forma correta para sua aplicação. conto com a ajuda dos amigos para isso.

 

Valeu galera.

[William Bruno 1501]

vc não pode fazer uma de cada vez isoladamente.

 

vc deve escolher se vai começar da menor e ir para a maior, ou começar da maior e ir até as pequenas.

 

e então, ir escrevendo uma regra depois da outra. Lembre-se da cascata, e que os estilos da regra de cima vão afetar as regras de baixo.

[stromdh 15]

Grande presença, valeu pela dica.

[Winde3 0]

Boa tarde galera. Tudo bom?

 

Estou tendo um problema parecido com o colega acima.

 

Quando fui fazendo os média tava tudo ok, mas quando precisei utilizar duas larguras iguais ele sobrepões a outra.

 

Ex:

 

@media all and (width : 1280px) and (max-height: 600px)   {}

@media all and (width : 1280px) and (max-height: 720px)   {}

 

Ou seja a de 600px "Morre", verifiquei no inspecionar elemento e ela é substituida.

 

Comecei do menor para o maior como sugeriu o amigo William Bruno.

 

Mas esse menos para maior se refere ao Width correto?

 

alguém poderia me dá uma dica?

 

vlw.