css3アダプティブレイアウトとは何ですか-フロントエンドQ&A-php.cn

css3アダプティブレイアウトとは何ですか

青灯夜游

リリース： 2022-06-02 12:05:24

オリジナル

2603 人が閲覧しました

アダプティブレイアウト (別名「レスポンシブレイアウト」) は、画面幅を自動的に認識し、それに応じて調整を行うことができる Web ページレイアウトを指します。このような Web ページは、複数の異なる端末と互換性を持たせることができます。各ターミナルは特定のバージョンを作成します。アダプティブレイアウトは、モバイル Web ブラウジングの問題を解決するために生まれ、さまざまな端末を使用するユーザーに優れたユーザーエクスペリエンスを提供できます。

css3アダプティブレイアウトとは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

アダプティブレイアウトとは

「レスポンシブレイアウト」とも呼ばれるアダプティブレイアウトは、画面の幅を自動的に識別し、対応する変更を行うことができます。調整された Web ページレイアウトは、端末ごとに特定のバージョンを作成するのではなく、Web ページが複数の異なる端末 (デバイス) と互換性があることを単に意味します。

実際、アダプティブと非アダプティブの違いは、簡単に言うと、デバイスの解像度に関係なくページが自動的に認識して適応し、閲覧ユーザーに優れたエクスペリエンスをもたらすことができることです。

このコンセプトは、モバイルでの Web ブラウジングの問題を解決するために生まれました。アダプティブレイアウトは、さまざまな端末を使用するユーザーに優れたユーザーエクスペリエンスを提供することができ、大画面スマートフォンの普及により、「一般的なトレンド」と言っても過言ではありません。

#css3 でアダプティブレイアウトを実装する方法

#一般的に使用される方法は次のとおりです:

CSS でメディアクエリを使用する (最も単純);
JavaScript を使用する (高コスト);
サードパーティのオープンソースフレームワークを使用する (たとえば、ブートストラップはさまざまなブラウザを適切にサポートできます)。

次に、アダプティブレイアウトの実装を示すためにメディアクエリを例に挙げてみましょう。

1. メタタグを設定します

まず、メタタグを設定して、ブラウザにビューポートの幅 ( Web ページ）はデバイスの幅と同じであり、以下に示すように、ユーザーがページをズームすることを禁止します:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

ログイン後にコピー

ビューポートを設定するときは注意する必要があります。ビューポートとは、表示される領域のサイズです。ビューポートを設定するときは、幅を設定するだけで、高さは気にしません。特定の高さは Web ページのコンテンツによって自動的に拡張されます。上記のメタタグのコンテンツの意味は次のとおりです:

viewport: Web ページの表示領域を表すビューポート;
width: ビューポートを制御します。サイズには、600 などの特定の値、またはキーワードで構成される特別な値を指定できます。たとえば、device-width はデバイスの幅を表します。
initial-scale: 初期スケーリング比 (ページが最初にロードされたときのスケーリング比) を表します;
#maximum-scale: 許可される最大スケーリング比を表しますユーザー、0 ～ 10.0 の範囲;
minimum-scale: ユーザーが 0 ～ 10.0 の範囲の最小比率にズームできることを示します。
user-scalable: ユーザーが手動でズームできるかどうかを示します。「はい」はスケーリングが許可されることを意味し、「いいえ」はスケーリングが禁止されることを意味します。

CSS メディアクエリは、指定された条件に基づいて、メディアタイプ (スクリーンプリント) ごとに異なる CSS を定義できます。さまざまなデバイスを使用するユーザーが最高のエクスペリエンスを得ることができるようにします。

メディアクエリを実装するには 3 つの方法があります:

1)、CSS ファイルで直接使用します。サンプルコードは次のとおりです:

@media (max-width: 320px) {
    /*0~320*/
    body {
        background: pink;
    }
}
@media (min-width: 321px) and (max-width: 375px) {
    /*321~768*/
    body {
        background: red;
    }
}
@media (min-width: 376px) and (max-width: 425px) {
    /*376~425*/
    body {
        background: yellow;
    }
}
@media (min-width: 426px) and (max-width: 768px) {
    /*426~768*/
    body {
        background: blue;
    }
}
@media (min-width: 769px) {
    /*769~+∞*/
    body {
        background: green;
    }
}

ログイン後にコピー

2)、@ を使用します。 import から import へのサンプルコードは次のとおりです:

@import &#39;index01.css&#39; screen and (max-width:1024px) and (min-width:720px)
@import &#39;index02.css&#39; screen and (max-width:720px)

ログイン後にコピー

3)、リンクタグで使用されます。サンプルコードは次のとおりです:

<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>

ログイン後にコピー

以下は、レスポンシブレイアウトの実装:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自适应布局（响应式布局）</title>
        <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
        <style>
            *{
                margin: 0px;
                padding: 0px;
                font-family: "微软雅黑";
            }
            #head, #foot, #main
            {
                height: 100px;
                width: 1200px;
                /*width: 85%;*/
                background-color: goldenrod;
                text-align: center;
                font-size: 48px;
                line-height: 100px;
                margin: 0 auto;
            }
            #head div{
                display: none;
                font-size: 20px;
                height: 30px;
                width: 100px;
                background-color: green;
                float: right;
                line-height: 30px;
                margin-top: 35px;
            }
            #head ul{
                width: 80%;
            }
            #head ul li{
                width: 20%;
                float: left;
                text-align: center;
                list-style: none;font-size: 20px;
            }
            #main{
                height: auto;
                margin: 10px auto;
                overflow: hidden;
            }
            .left, .center, .right{
                height: 600px;
                line-height: 600px;
                float: left;
                width: 20%;
                background-color: red
            }
            .center{
                width: 60%;
                border-left: 10px solid #FFF;
                border-right: 10px solid #FFF;
                box-sizing: border-box;
            }
            @media only screen and (max-width: 1200px) {
                #head, #foot, #main{
                width: 100%;
                }
            }
            @media only screen and (max-width: 980px) {
                .right{
                    display: none;
                }
                .left{
                    width: 30%;
                }
                .center{
                    width: 70%;
                    border-right: hidden;
                }
            }
            @media only screen and (max-width: 640px) {
                .left, .center, .right{
                    width: 100%;
                    display: block;
                    height: 200px;
                    line-height: 200px;
                }
                .center{
                    border: hidden;
                    border-top: 10px  solid #FFFFFF;
                    border-bottom: 10px solid #FFFFFF;
                    height: 600px;
                    line-height: 600px;
                }
                #head ul{
                    display: none;
                }
                #head div{
                    display: block;
                }
            }
        </style>   
    </head>
    <body>
        <div>
            <header id="head">
                <ul>
                    <li>header1</li>
                    <li>header2</li>
                    <li>header2</li>
                    <li>header2</li>
                    <li>header2</li>
                </ul>
                <div>icon</div>
            </header>
            <section id="main">
                <div class="left">
                    left
                </div>
                <div class="center">
                    center
                </div>
                <div class="right">
                    right
                </div>
            </section>
            <footer id="foot">
                footer
            </footer>
        </div>
    </body>
</html>

ログイン後にコピー

ブラウザウィンドウが 1200 ピクセル未満、980 ピクセルを超える場合、スタイルは 640 ピクセルを超え、980 ピクセル未満の場合とは異なります

(学習ビデオ共有: css3アダプティブレイアウトとは何ですか css ビデオチュートリアル