Zapytania o media - w dwóch szerokościach:

Question

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 mniej niż 900 pikseli. Wiem, że to jest prawdopodobnie bardzo proste i brakuje mi czegoś oczywistego, ale nie mogę tego zrozumieć. To, co wymyśliłem, to poniższy kod, doceniam każdą pomoc.

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

Answer 1

Musisz przełączyć 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/ (przy użyciu koloru tła, więc łatwiej jest potwierdzenie)

Answer 2

@Jonathan Sampson Myślę, że rozwiązaniem jest źle, jeśli użyj wielu @media.

Należy użyć (min-width pierwszy):

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

Answer 3

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