响应式设计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;} 
} 

它似乎并不如预期的工作。

可能是值得指出的是，我使用的引导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隐形/隐藏等之间的差异底部看的辅助类

Answer 2

您可以在底部把这个第一

/* for small screens, only execute in if statement */ 
@media only screen and (min-width : 320px) and (max-width : 768px) { 
.smallOnly { 
    visibility:visible!important; 
    display:block!important; 
}} 

然后它把它的大屏幕（一直以来未执行在if语句）

.smallOnly { 
visibility: none; 
display: none;} 

重要TG使它如此，随着重要事情始终覆盖一切，这将是主规则，无论它在哪里的文件中。