CSS 媒体查询 - 在两个宽度之间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14008781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media Queries - In between two widths
提问by russellsayshi
I'm trying to use CSS3 media queries to make a class that only appears when the width is greater than 400px and less than 900px. I know this is probably extremely simple and I am missing something obvious, but I can't figure it out. What I have come up with is the below code, appreciate any help.
我正在尝试使用 CSS3 媒体查询来创建一个仅在宽度大于 400 像素且小于 900 像素时出现的类。我知道这可能非常简单，而且我遗漏了一些明显的东西，但我无法弄清楚。我想出的是下面的代码，感谢任何帮助。
@media (max-width:400px) and (min-width:900px) {
.class {
display: none;
}
}
回答by Sampson
You need to switch your values:
你需要改变你的价值观：
/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
.foo {
display:none;
}
}?
Demo: http://jsfiddle.net/xf6gA/(using background color, so it's easier to confirm)
Demo：http: //jsfiddle.net/xf6gA/（使用背景色，更容易确认）
回答by WalkerNuss
@Jonathan Sampson i think your solution is wrong if you use multiple @media.
@Jonathan Sampson 我认为如果您使用多个@media ，您的解决方案是错误的。
You should use (min-width first):
您应该使用（min-width first）：
@media screen and (min-width:400px) and (max-width:900px){
...
}
回答by JasParkety
just wanted to leave my .scssexample here, I think its kinda best practice, especially I think if you do customization its nice to set the width only once! It is not clever to apply it everywhere, you will increase the human factor exponentially.
只是想在.scss这里留下我的例子，我认为这是一种最佳实践，尤其是我认为如果您进行自定义，最好只设置一次宽度！到处应用它并不聪明，你会成倍地增加人为因素。
Im looking forward for your feedback!
我期待您的反馈！
// 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;
}
}
回答by Charlie
.class {
display: none;
}
@media (min-width:400px) and (max-width:900px) {
.class {
display: block; /* just an example display property */
}
}