javascript - CSS ファイルのメディア クエリがまったく機能しない

Question

ヘッダーとページ コンテンツの間にサイドバー スナップを配置するための css メディア クエリの書き方は? ページ幅が 500 ピクセルを下回ったときに、この変更が行われるようにしたいと考えています。私はクロムブラウザのためにこれをやっています。

私のHTMLファイルの本文を見てください。

ボディのコンテンツは、後で Javascript を使用して埋められます。ボタンが作成され、「buttonAttachPoint」に追加されます。コンテンツは HTML-Elements String の形式で取得され、pageAttachPoint に追加されます。

現在、次の css コードを使用して列数を設定しています。

-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:3px;

次のメディア クエリは効果がないようです。

@media screen and (min-width: 500px) {
body
{ background-color: #0f0;
-webkit-column-count:1; }
}

どんな助けでも大歓迎です。

Answer 1

最大と最小を混同していると思います。

@media screen and (max-width: 500px){
    body { 
        background-color: #0f0;
        -webkit-column-count:1; }
    }
}

例: http://jsfiddle.net/HnPSF/1/