Consultas de mídia - entre duas larguras

141

Estou tentando usar consultas de mídia CSS3 para criar uma classe que só aparece quando a largura é maior que 400px e menor que 900px. Sei que isso é provavelmente extremamente simples e estou perdendo algo óbvio, mas não consigo descobrir. O que eu vim com o código abaixo, agradeço qualquer ajuda.

@media (max-width:400px) and (min-width:900px) {
    .class {
        display: none;
    }
}

css media-queries

— russellsayshi
fonte

268

Você precisa mudar seus valores:

/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
    .foo {
        display:none;
    }
}

Demonstração: http://jsfiddle.net/xf6gA/ (usando a cor de fundo, para facilitar a confirmação)

— Sampson
fonte

4

max-widthe min-widthdeve ser revertido. Desta forma é mais legível

— machineaddict

33

@ Jonathan Sampson, acho que sua solução está errada se você usar vários meios de comunicação .

Você deve usar ( largura mínima primeiro ):

@media screen and (min-width:400px) and (max-width:900px){
   ...
}

— WalkerNuss
fonte

10

A resposta aceita não está errada de forma alguma, mas acho que usar largura min a largura max é uma convenção mais clara e legível.

— Dave Powers

1

Concorde com @DavePowers. No meu caso, eu tive minha mídia consulta formatada como @WalkerNuss, mas tinha esquecido a primeira anddepois @media screen. Inserir o primeiro andcorrigiu isso para mim.

— Kyle Vassella

4

só queria deixar meu .scssexemplo aqui, acho que é meio que uma boa prática, especialmente se você fizer a personalização, é bom definir a largura apenas uma vez! Não é inteligente aplicá-lo em todos os lugares, você aumentará exponencialmente o fator humano.

Estou ansioso pelo seu feedback!

// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;

// Prepare your "function"
@mixin in-between {
     @media (min-width:$widthSmall) and (max-width:$widthMedium) {
        @content;
     }
}


// Apply your "function"
main {
   @include in-between {
      //Do something between two media queries
      padding-bottom: 20px;
   }
}

— JasParkety
fonte

Se você usou os parâmetros na mixin pode ser uma "função" ...

— 1984

3

.class {
    display: none;
}
@media (min-width:400px) and (max-width:900px) {
    .class {
        display: block; /* just an example display property */
    }
}

Expandir snippet

— Charlie
fonte