css - メディアクエリに基づいて要素を操作するには?

Question

メディア クエリを介して名前付き要素を操作するにはどうすればよいですか? 以下は動作しません。

<style type="text/css">
@media (max-width : 320px) {
#footer {display:none;}
#myimage {display:none;}
}

ページ内

<div id="footer">...</div>
<img id="myimage" src="..."/>

Answer 1

したがって、提供したコードは、フィドルに入れると機能します。ページが 320px より小さい場合、フッターと myImage 要素は表示されなくなります。

メディア クエリで変更されたコンテンツのよりクリーンなバージョンをセットアップしました。

http://jsfiddle.net/bXenf/

/* The magic happens here. */
@media only screen and (max-width: 480px) {
    #block1 { display:block; }
    #block2 { display:none; }
}