Css 如何在Windows 8应用商店应用程序的不同设备上使用屏幕的所有高度自动设置列数？

使用Javascript+HTML进行Windows 8应用商店应用程序开发，我正在寻找一种简单的方法，使页面布局具有一些长文本内容和一些图像，以典型地“自动”调整文本列数，从而使用户避免必须垂直滚动阅读文本。当然，我的意思是，为了避免“尽可能多”，这意味着如果设备处于横向模式，内容将跨列，只使用垂直可用高度，并根据需要添加尽可能多的列

如果我这样做：

@media screen and (-ms-view-state: fullscreen-landscape)
{
    #main {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 1fr 300px;
        -ms-grid-rows: 132px 1fr;
    }
}

#main {
    column-count: auto;
    column-width: 200px;
    height: 360px;
    overflow: auto;
}

我总是只指定一个2列2行的布局，不管我是使用百分比、分数还是像素

我猜在肖像模式下，仍然只有一个栏目会让人感觉更自然，不是吗？但至少，对于横向的情况，我不确定如何处理它，因为我们发现Windows8上的设备有很多类型的屏幕尺寸

非常感谢您的帮助。

更新： 我刚刚意识到，您不是在寻找如何指定要显示多少列，而是在寻找如何将长内容溢出到多个列中的技巧。对不起，误会了。下面我的原始答案仍然解决了指定在需要时使用多少列的问题

有一些CSS规则用于指定列（宽度、列数、边距等）。如果使用

高度

规则，您可能会实现所需的目标。试着这样做：

@media screen and (-ms-view-state: fullscreen-landscape)
{
    #main {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 1fr 300px;
        -ms-grid-rows: 132px 1fr;
    }
}

#main {
    column-count: auto;
    column-width: 200px;
    height: 360px;
    overflow: auto;
}

下面链接的MSDN文章讨论了所有这些选项，但IE“动手”网站将允许您实时玩

参考资料：

---

原始答案：

您可以根据宽度使用不同的CSS。例如：

@media screen and (max-width:800px) 
{
    #main {
        /* overrides for width less than 800 */
    }
}
@media screen and (min-width:800px) and (max-width:1200px)
{
    #main {
        /* overrides for width between 800 and 1200 */
    }
}

参考资料：

---

感谢您的回答和更新的答案，我正在查看。这与我的兴趣非常相关；）你知道你应该接受一个答案，如果它能解决你的问题，对吗@freeeman？我注意到你到目前为止一个也没有接受。人们最终会停止回答你。@TommyBs谢谢，我知道人们在网站上“接受”了答案，但不确定我是否获得了足够的声誉来这样做，或者是否有几个人必须投票才能这样做。谢谢