ホームページ >ウェブフロントエンド >フロントエンドQ&A >css3アダプティブレイアウトとは何ですか

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

青灯夜游
青灯夜游オリジナル
2022-06-02 12:05:242633ブラウズ

アダプティブ レイアウト (別名「レスポンシブ レイアウト」) は、画面幅を自動的に認識し、それに応じて調整を行うことができる 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: ユーザーが手動でズームできるかどうかを示します。「はい」はスケーリングが許可されることを意味し、「いいえ」はスケーリングが禁止されることを意味します。
  • 2. メディア クエリ

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 ビデオ チュートリアル

Web フロントエンド)

以上がcss3アダプティブレイアウトとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。