Media Query

メモメモ
display:inherit は親の要素を継承するやつ。
親がディスプレイされているから、継承させれば表示されるということですね。

/***** Screen 960px *****/
ここには基本が入る
どのサイズにも出る
BGなんかはここに記入すると他では無効化されるので注意 
.show-phone                         { display:none !important; }
.show-tablet                         { display:none !important; }
.show-screen                        { display:inherit !important; }
    
.hide-phone                            { display:inherit !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:none !important; }
/***** Screen Bigger than 960px *****/
@media only screen and (min-width:1200px) {
960以上1200未満のみ
.show-phone                         { display:none !important; }
.show-tablet                         { display:none !important; }
.show-screen                        { display:inherit; }

.hide-phone                            { display:inherit !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:none !important; }
}
/***** Tablet (Smaller than 959px) *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
768以上959未満のみ
.show-phone                         { display:none !important; }
.show-tablet                         { display:inherit !important; }
.show-screen                        { display:none !important; }
    
.hide-phone                            { display:inherit !important; }
.hide-tablet                        { display:none !important; }
.hide-screen                        { display:inherit !important; }
}
/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
480以上767未満のみ

.show-phone                         { display:inherit !important; }
.show-tablet                         { display:none !important; }
.show-screen                        { display:none !important; }
    
.hide-phone                            { display:none !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:inherit !important; }
}
/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 479px) {
479以下はこちら
.show-phone                         { display:inherit !important; }
.show-tablet                         { display:none !important; }
.show-screen                        { display:none !important; }
    
.hide-phone                            { display:none !important; }
.hide-tablet                        { display:inherit !important; }
.hide-screen                        { display:inherit !important; }
}



コメントは受け付けていません。