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

我正在尝试使用 CSS3媒体查询来创建一个只在宽度大于400px 和小于900px 时才会出现的类。我知道这可能非常简单，我遗漏了一些显而易见的东西，但我想不出来。我想出的是以下代码，感谢任何帮助。

@media (max-width:400px) and (min-width:900px) {
.class {
display: none;
}
}
253204 次浏览
小开
最佳答案

你需要改变你的价值观:

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

演示: http://jsfiddle.net/xf6gA/(使用背景颜色，所以更容易确认)

小开

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

你应使用(最小宽度优先) :

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

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

小开

只是想离开我的 .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;
}
}

提交答案