1

私は現在、さまざまなデバイス (デスクトップ、モバイルなど) で完全に応答し、アクセスできる必要がある Web サイトに取り組んでいます。HTMLマークアップを1つだけにしたいのですが、メディアクエリを使用してさまざまなタイプのレイアウトを実現しています。

クリーンなマークアップを作成することは私にとって重要なので、始めましょう。物事を簡単にするために、不要なものをすべて削除します。記事のリスト（タグ）があります。各記事の内容は VARIABLE ですので、一定の高さを決めることはできません。私の目標は、これらのセクションをデバイスに基づいて配置することです。たとえば、次のようになります。

1) モバイル デバイスでは、列は 1 つだけで、すべてのセクションが互いに下にあります。

2) タブレットでは 2 つの列が必要なので、2 つの記事が隣り合っています (下の画像を参照)。

3) デスクトップでは、3 つの列が必要です...

私のマークアップはこのように見え、列などのプレゼンテーション要素を認識しています。マークアップに列を含めた場合 (列 div を使用した追加のマークアップ)、ターゲット デバイスに基づいてレイアウトを変更する機会はありません。これは、「マークアップ時」にレイアウト/プレゼンテーションを修正したことを意味します。

<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>

私は CSS を扱う初心者ではありません。ここ数日、ほぼすべてのことを試しました。

記事を典型的な 2 列のレイアウトに配置するにはどうすればよいでしょうか。すべての記事の高さが同じであれば、非常に簡単です。1列でも全く問題ありません。3 列は、2 列よりも実装がさらに困難です。

2 列の望ましいレイアウトは次のようになります。

2列の希望のレイアウト

しかし、フロートを操作するとこの結果が得られます（フロート：左）

左で浮きます

ms-grid と flexbox は、(私がサポートしなければならない) 古いブラウザーではサポートされていないため、代替手段ではありません。

よろしくお願いします！

4

2 に答える 2

0

あなたが何を求めているのか、それが CSS3 を使用した典型的な RWD とどのように異なるのかは完全にはわかりませんが、それがどのように聞こえるかはわかりません。メディア クエリを使用して、異なる画面解像度間でレイアウトを応答できます。さまざまなモバイルとタブレットを含む; ポートレートと風景のビュー。

以下は一例です。

@media screen and (max-width: 480px) {
   #leftbox { 
     margin-right: 100px;
    }
}

このリンクを参照してください。http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

または、各解像度ごとに完全に新しいレイアウトを持つ新しいスタイルシートをロードすることもできます。

于 2013-11-23T05:23:40.007 に答える