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

Posted 2023-03-06

【中文标题】媒体查询 - 在两个宽度之间

【英文标题】：Media Queries - In between two widths

【发布时间】：2012-12-10 03:13:11

【问题描述】：

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

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

【参考方案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/（使用背景色，更容易确认）

【讨论】：

max-width 和 min-width 应该颠倒。这种方式更具可读性

澄清一下，@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) ... ...），则更易于阅读

【参考方案2】：

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

你应该使用 (min-width first):

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

【讨论】：

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

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

【参考方案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;
   

【讨论】：

如果你使用了mixin中的参数，它可能是一个“函数”...

【参考方案4】：

.class 
    display: none;

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