html(css) 画面サイズで特定の要素の表示・非表示を切り替える。

開発環境:
Windows 10 Pre
chrome Ameba
開発言語：
html css

要素の非表示はCSSに「display:none」を指定することで実現します。
これを使う場面はあまり思いつきませんが、
レスポンシブルhtmlを書く場合は、よく使われているようです。

スマホ用には、

@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も少し変わっているようです。