0

Windows 8ストアアプリの開発にJavascript + HTMLを使用して、テキストの長いコンテンツといくつかの画像を含むページのレイアウトを作成して、通常はテキストの列数を順番に「自動的に」調整する簡単な方法を探していますユーザーがテキストを読むために垂直方向にスクロールする必要がないようにします。もちろん、デバイスが横向きモードの場合、「可能な限り」を避けるために、コンテンツは列にまたがり、利用可能な高さのみを使用して、必要なだけ列を追加します。

私がこのようなことをすると：

@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行のレイアウトのみを指定することになります...

ポートレートモードでは、通常は1列のままの方が自然に感じると思いますが、そうではありませんか? しかし、少なくとも、横向きの場合は、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 に答える