響應式設計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使它如此，隨着重要事情始終覆蓋一切，這將是主規則，無論它在哪裏的文件中。