css - 如何在 Windows 8 Store 应用程序的不同设备上使用屏幕区域的所有高度设置自动列数？

Question

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

我总是最终指定仅一个 2 列和 2 行的布局，无论我是否会使用百分比、分数或像素...

我想在纵向模式下，仍然只有一个列通常会感觉更自然，不是吗？但至少，对于 landscape 情况，我不确定如何处理它，因为我们发现 Windows 8 设备的屏幕尺寸有多种类型。

非常感谢您的帮助。

Answer 1

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

有一些 CSS 规则用于指定列(宽度、列数、装订线等)。与 height 规则一起使用，您可能会达到您想要的效果。尝试这样的事情:

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

下面链接的 MSDN 文章讨论了所有这些选项，但 IE“实践”站点将让您实时体验。

引用资料:

• > MSDN article: Multi-column layout
• > IE "hands-on" site

---

原回答:

您可以根据宽度使用不同的 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 */
    }
}

引用资料:

• > Metro: Understanding CSS Media Queries
• > W3C: Media Queries