Question

如何编写css媒体查询以使标题和页面内容之间的侧边栏对齐？我希望在页面宽度低于500像素时发生此更改。我正在为Chrome浏览器做这个。

请查看我的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; }
    }
}