媒体查询 - 两个宽度之间

Question

我想使用CSS3媒体查询创建一个类，仅在宽度大于400像素且小于900像素时出现。我知道这可能非常简单，但我可能错过了一些明显的东西，我无法解决它。我想到的代码如下，感谢任何帮助。

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

- russellsayshi

Answer 1

您需要切换您的值：

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

示例: http://jsfiddle.net/xf6gA/（使用背景颜色，因此更容易确认）

- Sampson

---

应该将 max-width 和 min-width 交换，这样更易读。 - machineaddict

澄清一下，@media (max-width:X2) and (min-width:X1) 和 X1 <= screen_size AND screen_size <= X2 是相同的。此外，最好先写出 min-width 的值 @media (min-width:X1) and (max-width:X2)，因为如果提供了屏幕尺寸列表（例如 @media (min-width:X1) and (max-width:X2) { ... } @media (min-width:X3) and (max-width:X4) { ... } ...），这样更容易阅读。 - Dave F

Answer 2

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

你应该使用（首先使用min-width）：

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

- WalkerNuss

---

被接受的答案并没有错，但我认为使用最小宽度到最大宽度是一种更清晰易读的约定。 - Dave Powers

同意@DavePowers的观点。在我的情况下，我像@WalkerNuss一样格式化了我的媒体查询，但是忘记了@media screen后面的第一个and。插入第一个and就解决了这个问题。 - Kyle Vassella

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

- JasParkety

---

如果您在mixin中使用了参数，则可能是一个“函数”... - 1984

Answer 4

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

- Charlie