HTML(CSS) 画面サイズで特定の要素の表示・非表示を切り替える
要素の非表示はCSSに「display:none」を指定することで実現します。
これを使う場面はあまり思いつきませんが、
レスポンシブルhtmlを書く場合は、よく使われているようです。
———————————————————————
スマホ用には、
HTML
<div class=”none”>OOOOO</div>
CSS
@media screen and (max-width: 460px){
.none {display:none}
}
-------------------------------------------------
スマホAndタブレット用
@media only screen and (min-width: 460px)
and (max-width: 760px){
.none {display:none}
}
------------------------------------------------
@mediaの複数条件指定でonlyキーワードは、必要ないのでは？
html4からhtml5に代わりCSSも3とか4になっているので、
@mediaも少し変わっているようです。
