Preciso de auxílio com media queries [2]

[deehhalves 0]

Quando devo usar @media (max-width) e @media (min-width) ???

[pmmartinelli 13]

@media (max-width e min-width) são usando para limitar a aplicação do CSS apenas às resoluções definidas por você nestes atributos.

 

Digamos que você precisa fazer com que uma DIV, por exemplo, apareça apenas quando seu site estiver sendo visualizado em uma resolução até 1000px, basta informar que o @media será aplicado em um max-width de 1000px.

@media screen and (max-width: 1000px){
    .div1 { ... }
}

Ou então se deverá aparecer somente em resolução acima de 800px ... vc pode aplicar um min-width de 800px.

@media screen and (min-width: 800px){
 .div1 { ... }
}

Enfim... espero ter ajudado.

[deehhalves 0]

Em todos meus projetos eu uso dessa forma:

@media (max-width: qtd pixels) {

}

e não como você me explicou:

@media screen and (max-width: qtd pixels) {

}

Entendi 55% de sua explicação haha.

Obrigado por enquanto!

 

Minha maior preocupação é ter que fazer varios media queries em meu css sendo que pode ter um jeito melhor de fazer isso. Tem?

[pmmartinelli 13]

A propriedade "screen" indica qual o tipo de mídia de saída para essa configuração, podendo ser screen (tela), print (impressão) entre vários outros e pode ser omitida, sem problema.

 

@media possui várias propriedades de configuração, e as necessidades podem ser as mais variadas também. Assim, acredito que sempre há uma forma mais adequada. No entanto, se a necessidade é possibilitar formatações variadas de acordo com uma variedade de resoluções, não há forma mais simplificada que a definição através do cálculo de resolução.

 

Cabe a você criar uma combinação que atenda sua necessidade.

 

Um guia muito recomendado é o do Mozilla. Dê uma olhadinha lá:

https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries