Zapytania o media - między dwiema szerokościami

141

Próbuję użyć zapytań o media CSS3, aby utworzyć klasę, która pojawia się tylko wtedy, gdy szerokość jest większa niż 400 pikseli i mniejsza niż 900 pikseli. Wiem, że jest to prawdopodobnie niezwykle proste i brakuje mi czegoś oczywistego, ale nie mogę tego rozgryźć. Wymyśliłem poniższy kod, wdzięczny za każdą pomoc.

@media (max-width:400px) and (min-width:900px) {
    .class {
        display: none;
    }
}
css media-queries russellsayshi
źródło

Odpowiedzi:

269

Musisz zmienić swoje wartości:

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

Demo: http://jsfiddle.net/xf6gA/ (używając koloru tła, więc łatwiej jest to potwierdzić)

Sampson
źródło
4
max-widthi min-widthpowinno zostać odwrócone. ten sposób jest bardziej czytelny
machineaddict
33

@Jonathan Sampson Myślę, że twoje rozwiązanie jest złe, jeśli używasz wielu @media .

Powinieneś użyć ( najpierw min-width ):

@media screen and (min-width:400px) and (max-width:900px){
   ...
}
WalkerNuss
źródło
10
Przyjęta odpowiedź nie jest w żaden sposób błędna, ale myślę, że użycie min-width do max-width jest bardziej przejrzystą i czytelną konwencją.
Dave Powers
1
Zgadzam się w / @DavePowers. W moim przypadku moje zapytanie o media zostało sformatowane jak @WalkerNuss, ale zapomniałem pierwszego andpo @media screen. Wstawienie pierwszego androzwiązało to dla mnie.
Kyle Vassella
4

chciałem tylko zostawić .scsstutaj mój przykład, myślę, że to najlepsza praktyka, szczególnie myślę, że jeśli robisz dostosowywanie, fajnie jest ustawić szerokość tylko raz! Nie jest mądrze stosować go wszędzie, zwiększysz wykładniczo czynnik ludzki.

Nie mogę się doczekać Twojej opinii!

// 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
źródło
Jeśli użyłeś parametrów w miksie, może to być "funkcja" ...
1984,
3 

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

Charlie
źródło