媒体查询 - 介于两个宽度之间

Question

我正在尝试使用CSS3媒体查询来创建一个只在宽度大于400px且小于900px时出现的类.我知道这可能非常简单,我遗漏了一些明显的东西,但我无法弄明白.我想出的是以下代码,感谢任何帮助.

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

Answer 1

您需要切换值:

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

演示:http://jsfiddle.net/xf6gA/(使用背景颜色,因此更容易确认)

Answer 2

@Jonathan Sampson我认为如果使用多个@media,你的解决方案是错误的.

你应该使用(最小宽度):

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

Answer 3

只是想在.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;
   }
}