媒体查询-在两个宽度之间
媒体查询-在两个宽度之间
提问于 2012-12-23 13:13:35
我正在尝试使用CSS3媒体查询来创建一个仅当宽度大于400px小于900px时才出现的类。我知道这可能非常简单，我遗漏了一些明显的东西，但我不能弄明白。我想出的是下面的代码，感谢任何帮助。
@media (max-width:400px) and (min-width:900px) {
.class {
display: none;
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2012-12-23 13:19:24
您需要切换您的值：
/* No less than 400px, no greater than 900px */
@media (min-width:400px) and (max-width:900px) {
.foo {
display:none;
}
}Demo：http://jsfiddle.net/xf6gA/ (使用背景色，便于确认)
Stack Overflow用户
发布于 2018-10-09 16:56:30
我只想把我的.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;
}
}Stack Overflow用户
发布于 2016-08-11 19:03:32
.class {
display: none;
}
@media (min-width:400px) and (max-width:900px) {
.class {
display: block; /* just an example display property */
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14008781
复制相关文章
相似问题