css - 响应式设计 css3 在小屏幕上显示而不是在大屏幕上显示

Question

css3 媒体查询和响应式设计的新手。

我想知道如何只在小屏幕上而不是在大屏幕上显示某些东西(比如 div)。 我试过类似的东西:

@media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}

... 任何更大的东西都有例如:

@media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}

它似乎没有按预期工作。

可能值得指出我正在使用 bootstrap 2.0

Answer 1

更好的做法是让所有默认样式都适合移动设备，然后使用 min- 媒体查询来调整大小:

div { /*put whatever your default styles are first*/ }

/* Then use the media query to hide it at 481 and wider */
@media all and (min-width:481px) {
    div { display:none }
}

看320andup和 Skeleton和 this page 的 CSS举些例子。查看 this CSS 底部的辅助类对于不可见/隐藏等之间的差异