Media Queries - ในระหว่างความกว้างสอง

ฉันพยายามใช้คำสั่งสื่อ CSS3 เพื่อสร้างคลาสที่ปรากฏเฉพาะเมื่อความกว้างมากกว่า 400px และน้อยกว่า 900px ฉันรู้ว่านี่อาจจะง่ายมากและฉันก็ขาดอะไรที่ชัดเจน แต่ฉันไม่สามารถเข้าใจได้ สิ่งที่ฉันได้มาคือโค้ดด้านล่างขอขอบคุณสำหรับความช่วยเหลือ

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

คุณต้องเปลี่ยนค่าของคุณ:

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

การสาธิต: http://jsfiddle.net/xf6gA/ (ใช้สีพื้นหลังเพื่อให้ง่ายต่อการยืนยัน)

@ Jonathan Sampson ฉันคิดว่าวิธีการแก้ปัญหาของคุณผิดถ้าคุณใช้หลาย@media

คุณควรใช้ ( ความกว้างต่ำสุดก่อน ):

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

แค่อยากจะ.scssยกตัวอย่างของฉันที่นี่ฉันคิดว่ามันเป็นวิธีที่ดีที่สุดโดยเฉพาะอย่างยิ่งฉันคิดว่าถ้าคุณปรับแต่งมันเป็นเรื่องดีที่จะกำหนดความกว้างเพียงครั้งเดียว! มันไม่ฉลาดที่จะใช้มันทุกหนทุกแห่งคุณจะเพิ่มปัจจัยมนุษย์อย่างทวีคูณ

ฉันรอคอยสำหรับข้อเสนอแนะของคุณ!

// 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;
   }
}