CSS3 メディア クエリを使用したレスポンシブ デザインのための HTML5 実践コード共有

画面解像度は 320px (iPhone) から 2560px (大型モニター) 以上の範囲になりました。ユーザーは Web サイトにアクセスするためにデスクトップ コンピューターを使用するだけでなく、携帯電話、ラップトップ、タブレットも使用します。したがって、Web サイトの幅を固定値に設定する従来の方法では、ニーズを満たすことができなくなりました。ウェブ デザインはこの新しい要件に適応する必要があり、ページ レイアウトはアクセスするデバイスのさまざまな解像度に応じて自動的に調整できる必要があります。このチュートリアルでは、html5 と CSS3 メディア クエリを使用して、クロスブラウザーのレスポンシブ デザインを完成させる方法を紹介します。

最初の実行

開始する前に、最終的なデモを表示して最終的な効果を確認できます。ブラウザのサイズを変更すると、ウィンドウのサイズに応じてページのレイアウトが自動的に調整されることがわかります。

その他の例

その他の関連する例を参照するには、以下のアドレスにアクセスしてください: WordPress テーマ。次のメディア クエリを設計しました: Tisa、Elemin、Suco、iTheme2、Funki、Minblr、および Wumblr。

概要

デフォルトでは、ページコンテナの幅は980ピクセルで、このサイズは1024ピクセルを超える解像度用に最適化されています。 ビューポートの幅を確認するためにメディアクエリが使用されます。980px未満の場合は、狭画面表示モードに変更され、ページレイアウトは固定幅ではなくフロー幅を使用します。ビューポートが 650px 未満の場合、モバイル表示モードに変更され、コンテンツやサイドバーなどは別の列レイアウトに変更され、その幅が画面幅いっぱいになります。

HTMLコード

ここでは、以下のHTMLコードの詳細については紹介しません。以下はレイアウト ページのメイン フレームで、「ヘッダー」、「コンテンツ」、「サイドバー」、「フッター」をラップする「pagewrap」コンテナーがあります。

<p id="pagewrap">

    <header id="header">

        <hgroup>
            <h1 id="site-logo">Demo</h1>
            <h2 id="site-description">Site Description</h2>
        </hgroup>

        <nav>
            <ul id="main-nav">
                <li><a href="#">Home</a></li>
            </ul>
        </nav>

        <form id="searchform">
            <input type="search">
        </form>

    </header>
    
    <p id="content">

        <article class="post">
            blog post        </article>

    </p>
    
    <aside id="sidebar">

        <section class="widget">
             widget        </section>
                        
    </aside>

    <footer id="footer">
        footer    </footer>
    </p>

HTML5.js

デモでは html5 タグを使用しましたが、IE9 より前の IE ブラウザー は