css - 媒体查询 - 在两个宽度之间

Question

我正在尝试使用 CSS3 媒体查询来制作一个仅在宽度大于 400 像素且小于 900 像素时出现的类。我知道这可能非常简单，而且我遗漏了一些明显的东西，但我无法弄清楚。我想出的是下面的代码，感谢任何帮助。

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

Answer 1

您需要切换您的值：

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

Demo： 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;
   }
}

Answer 4

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