CSS @Media专栏

Question

我正在使用CSS作为文本列，但我决定使用CSS的@media基于屏幕大小动态更改列数。

所以这个：

.SetColumns {
    background: inherit;    
    padding: 0 20px 20px 20px;
    -moz-column-count: 2;
    -moz-column-gap: 40px;
    -moz-column-rule: 3px double #666;
    -webkit-column-count: 2; 
    -webkit-column-gap: 40px;
    -webkit-column-rule: 3px double #666;
    column-count: 2;
    column-gap: 40px;
    column-rule: 3px double #666;
}

成为了这个（删除了列数）：

.SetColumns {
    background: inherit;    
    padding: 0 20px 20px 20px;
    -moz-column-gap: 40px;
    -moz-column-rule: 3px double #666;
    -webkit-column-gap: 40px;
    -webkit-column-rule: 3px double #666;
    column-gap: 40px;
    column-rule: 3px double #666;
}

然后我将列计数自己移动到另一个包含css文件：

@media only screen and (max-width: 415px){
    .stdv {display: none;} /* Site menu */
    .LogoBar {display: none;}
    .TitleBar {height: 20px;}
    .PageContent {margin: -40px 0 150px 0;}
    .Logout {padding-left: 0;
             margin-left: 0;}
    div.UpdateDate {display: none;}
    .SetColumns {-moz-column-count: 1;
                  -webkit-column-count: 1;
                   column-count: 1;
                 }
}

@media only screen and (max-width: 1024px and (min-width: 416px){
    .SetColumns {-moz-column-count: 2;
                  -webkit-column-count: 2;
                   column-count: 2;
                 }
}

@media only screen and (max-width: 1919px) and (min-width: 1024px){
    .SetColumns {-moz-column-count: 3;
                  -webkit-column-count: 3;
                   column-count: 3;
                 }
}

@media only screen and (min-width: 1920px){
    .SetColumns {-moz-column-count: 4;
                  -webkit-column-count: 4;
                   column-count: 4;
                 }
}

但无论浏览器大小如何，只能获得一列。 CSS中是否有一些规则需要重复所有列标记以使其正常工作，或者是否存在其他一些我错过的明显错误？

更新：为了使列工作，我不得不在每个@media中重复列标记，而我不必这样做。因此，摆脱这个并将其放入每个@media标签中都有效，这不是我想要做的。

.SetColumns {
    background: inherit;    
    padding: 0 20px 20px 20px;
    -moz-column-gap: 40px;
    -moz-column-rule: 3px double #666;
    -webkit-column-gap: 40px;
    -webkit-column-rule: 3px double #666;
    column-gap: 40px;
    column-rule: 3px double #666;
}

用它替换它（前两个没有列，所以不需要那些）

@media (max-width: 600px){
    .stdv {display: none;} /* Site menu */
    .LogoBar {display: none;}
    .TitleBar {height: 20px;}
    .PageContent {margin: -40px 0 150px 0;}
    .Logout {padding-left: 0;
             margin-left: 0;}
    div.UpdateDate {display: none;}
    .SetColumns {
        background: inherit;    
        padding: 0 20px 20px 20px;
    }
}

@media (min-width: 600px){
    .SetColumns {
        background: inherit;    
        padding: 0 20px 20px 20px;
    }
}

@media (min-width: 800px){
.SetColumns {-moz-column-count: 1;
        background: inherit;    
        padding: 0 20px 20px 20px;
        -moz-column-count: 2;
        -moz-column-gap: 40px;
        -moz-column-rule: 3px double #666;
        -webkit-column-count: 2; 
        -webkit-column-gap: 40px;
        -webkit-column-rule: 3px double #666;
        column-count: 2;
        column-gap: 40px;
        column-rule: 3px double #666;
    }
}

@media (min-width: 1024px){
    .SetColumns {
        -moz-column-count: 1;
        background: inherit;    
        padding: 0 20px 20px 20px;
        -moz-column-count: 3;
        -moz-column-gap: 40px;
        -moz-column-rule: 3px double #666;
        -webkit-column-count: 3; 
        -webkit-column-gap: 40px;
        -webkit-column-rule: 3px double #666;
        column-count: 3;
        column-gap: 40px;
        column-rule: 3px double #666;
    }
}

@media (min-width: 1500px){
    .SetColumns {-moz-column-count: 1;
        background: inherit;    
        padding: 0 20px 20px 20px;
        -moz-column-count: 4;
        -moz-column-gap: 40px;
        -moz-column-rule: 3px double #666;
        -webkit-column-count: 4; 
        -webkit-column-gap: 40px;
        -webkit-column-rule: 3px double #666;
        column-count: 4;
        column-gap: 40px;
        column-rule: 3px double #666;
    }
}