0

デスクトップ画面用の 2 列レイアウトの Web ページがあり、HTML は特定の順序で記述され、目的のレイアウトを実現します。基本的な設定は次のとおりです。

<div>
    <div class="left-column">
        <h1>Heading 1</h1>
        <p>Text here...</p>
    </div>
    <div class="right-column">
        <img>
    </div>
</div>
<!-- columns to sit side by side -->

ただし、小さな画面の場合、このレイアウトを単純化する必要があります (1 列、上 > 下) が、HTML の元の順序が原因で、メディア クエリを使用してこれらの要素を再配置するのが難しいことがわかりました。小さい画面の場合、レイアウトを次のようにしたいと思います。

<div>
    <h1>Heading 1</h1>
    <img>
    <p>Text here...</p>
</div>

ご覧のとおり、1 つの div と the のみがand要素の間<img>を移動するようにします。<h1><p>

小さい画面にのみ表示される代替 HTML レイアウトを実現するにはどうすればよいですか?

4

4 に答える 4

1

大まかな解決策ですが、これはスクリプトのないものです。

左の div と&の間に重複するimg要素を保持します。デフォルトのままにしておきます。次に、メディアクエリを使用して、単一の列ビューを表示し、他の要素またはdiv を完全に非表示にするときに表示します。h1pdislay:noneimgright-column

于 2013-12-02T11:32:20.510 に答える
1

PHP に精通している場合は、ライブラリ ( http://mobiledetect.net/など) を使用して、サイトが実行されているデバイスを検出し、表示するバージョンを提供する必要があります。

あなたの場合、mobiledetect の結果に応じて、div が PHP 変数にラップされた if/else 文があります。これにより、コンテンツが重複していないことが保証されます (これは SEO に悪影響を及ぼします)。

于 2013-08-07T09:30:25.763 に答える
0

デスクトップとモバイルを対象とする場合は、(可能であれば) レスポンシブ デザインを構築することを考えています。ただし、あなたの質問によると、それはまったく悪い習慣ではなく、コンテンツのセットが異なる場合に受け入れられます. 多くの大企業がこのアプローチを採用しています。

このリンクを確認してください。役立つかもしれません - http://mobile.smashingmagazine.com/2012/07/19/do-mobile-desktop-interfaces-belong-together/

于 2013-08-07T09:36:26.003 に答える
0

HTML を見ると、デスクトップ デバイスとモバイル デバイスの両方で同じコンテンツが表示されようとしているように見えますが、div に与えられたクラス名だけが異なります。

あなたがそのようにしている場合、私の提案は次のとおりです。divには同じ名前を付けて、繰り返さないでください。div を非表示にするように、異なる画面 (メディア クエリ) に個別のスタイルを記述します。モバイル デバイスで個別のスタイルを必要とする要素がほとんどないように、スタイルをパーセンテージで記述するようにしてください。

eg: 
/* Desktop styles */
@media screen and (max-width: 600px)
{
    /* Styles for elements upto 600  */
}
于 2013-08-07T09:32:02.183 に答える