CSS列未更新方向更改

Question

我正在使用CSS列构建移动网络应用程序：

• 在手机上查看时，我希望内容部分为单列。
• 当它在平板电脑上时，我希望内容区域有两列。
• 当它在风景中时，我希望它有三个。

它在加载或刷新时非常有效，但列数不会因方向更改而改变。

以下是相关的 CSS ：

@media (min-width: 320px) {
    main {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    }
}

@media (min-width: 768px) {
    main {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    }
}

@media (min-width: 960px) {
    main {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    }
}

以下是该页面的链接：http://bushidodesigns.net/bd

Answer 1

所以，我想通了：如果你将列数应用于html标签，它就不会更新方向更改。你需要上课。换句话说，这有效：

@media (min-width: 960px) {
.my-div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}

这不是：

@media (min-width: 960px) {
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}