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;
}
}Odpowiedzi:
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ć)
@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){
...
}andpo @media screen. Wstawienie pierwszego androzwiązało to dla mnie.
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;
}
}.class {
display: none;
}
@media (min-width:400px) and (max-width:900px) {
.class {
display: block; /* just an example display property */
}
}
max-widthimin-widthpowinno zostać odwrócone. ten sposób jest bardziej czytelny