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;
}
}