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