javascript - CSS文件中的媒体查询根本不起作用

Question

如何编写 css 媒体查询以使侧边栏捕捉位于标题和页面内容之间？我希望当页面宽度低于 500 像素时发生这种变化。我正在为 chrome 浏览器执行此操作。

请看一下我的 HTML 文件的正文。

正文的内容稍后使用 Javascript 填充。按钮被创建并附加到“buttonAttachPoint”。内容以 HTML-Elements 字符串的形式获取并附加到 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; }
    }
}

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