Media Queries - Zwischen zwei Breiten

Question

Ich versuche CSS3 Medienabfragen zu verwenden, um eine Klasse zu erstellen, die nur angezeigt wird, wenn die Breite größer als 400px und kleiner als 900px ist. Ich weiß, das ist wahrscheinlich sehr einfach und ich vermisse etwas Offensichtliches, aber ich kann es nicht herausfinden. Was ich mir ausgedacht habe, ist der folgende Code, schätze jede Hilfe.

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

Answer 1

Sie benötigen Werte wechseln:

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

Demo: http://jsfiddle.net/xf6gA/ (mit Hintergrundfarbe, so ist es einfacher, zu bestätigen)

Answer 2

@ Jonathan Sampson Ich denke, Ihre Lösung falsch ist, dass Sie, wenn Verwenden Sie mehrere @media.

Sie sollten (min-width erste) verwenden:

@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 */ 
 
    } 
 
}