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

141

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

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

css media-queries

— 罗素说
source

268

您需要切换值：

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

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

— 桑普森
source

4

max-width并且min-width应该颠倒过来。这种方式更具可读性

— machineaddict

33

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

您应该使用（最小宽度优先）：

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

— 沃克·诺斯
source

10

可接受的答案无论如何都没有错，但是我认为使用min-width到max-width是更清晰易读的约定。

— Dave Powers

1

同意@DavePowers。就我而言，我有我的媒体查询格式类似于@WalkerNuss，但已经忘记了第一个and之后@media screen。插入第一个and为我解决的问题。

— 凯尔·瓦塞拉

4

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

— 贾斯·帕克蒂
source

如果在mixin中使用了参数，则可能是“函数” ...

— 1984年

3

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

展开摘要

— 查理
source