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