レスポンシブルデザイン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;} 
} 

意図したとおりに動作するようには思えません。

は、私が使用していることを指摘する価値があるかもしれません、ブートストラップ

Answer 1

それはすべてあなたのデフォルトのスタイルをモバイルフレンドリーにして、サイズアップにmin-メディアクエリを使用するより良い練習です2.0：

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; 
}} 

を入れていないため、実行することができます重要で何かが常に他のすべてを上書きし、それは関係なく、それがファイルである場合のマスタールールになるよう

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

）if文の中で重要なTgがそれになります。