0

使用 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 行的布局，无论我会使用百分比、分数还是像素......

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

非常感谢你的帮助。

4

1 回答 1

1

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

有一些用于指定列的 CSS 规则（宽度、列数、装订线等）。与height规则一起使用，您可能可以实现您正在寻找的东西。尝试这样的事情：

#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 */
    }
}

参考：

于 2013-03-13T15:21:42.150 回答