ホームページ > 記事 > ウェブフロントエンド > アダプティブレイアウトとは何ですか?アダプティブレイアウトを実装するにはどうすればよいですか?

アダプティブレイアウトとは何ですか?アダプティブレイアウトを実装するにはどうすればよいですか?

不言オリジナル: 2018-09-27 14:18:0132640ブラウズ

フロントエンドレイアウトにはアダプティブレイアウトというレイアウトがありますが、アダプティブレイアウトとは何を意味するのでしょうか。アダプティブレイアウトを実装するにはどうすればよいですか?この記事ではアダプティブレイアウトの意味とアダプティブレイアウトの実装方法を紹介します。

まず、アダプティブレイアウトとはについて見てみましょう。

いわゆるアダプティブレイアウト。Baidu から次の定義を検索できます。アダプティブデザインとは、Web ページをさまざまなサイズの端末デバイスに適応的に表示できるようにする新しい Web デザイン手法とテクノロジーを指します。簡単に言うと、適応性とは、同じページを異なるサイズのデバイスに自動的に適応させ、それによって異なるデバイスに異なるバージョンのページを提供するという問題を解決することです。

アダプティブレイアウトとは何かを理解したところで、アダプティブレイアウトを実装する方法を見てみましょう。

ページのアダプティブレイアウトは、高さアダプティブと幅アダプティブに分けられます。実装方法は実際にはさまざまです。例として 3 列のレイアウトを取り上げます。アダプティブレイアウトの方法です。

1. アダプティブレイアウトの高さ調整

高さ調整では、各モジュールを絶対位置に設定し、中央の自動値を設定します。適応されたモジュールの上部と下部の属性のそれぞれは、先頭モジュールと下部モジュールの高さであり、次に中間モジュールの高さが適応されます。

高さ適応レイアウトのコードは次のとおりです:

<body>
        <div class="top">120px</div>
        <div class="main">自适应</div>
        <div class="bottom">120px</div>
</body>

.top{
    width: 100%;
    height: 120px;
    position: absolute;
    background-color: greenyellow;
    
}
.main{
    position: absolute;
    width: 100%;
    top: 120px;
    bottom: 120px;
    background-color: pink;
    height: auto;
}
.bottom{
    position: absolute;
    bottom: 0;//别漏了
    width: 100%;
    height: 120px;
    background-color:greenyellow ;
}

高さ適応レイアウトの効果は次のとおりです:

アダプティブレイアウトとは何ですか?アダプティブレイアウトを実装するにはどうすればよいですか?

2アダプティブレイアウト幅の適応

幅の適応には 3 つの方法があります。1 つは絶対配置を使用する方法、最初に中間モジュールをレンダリングする方法、およびそれ自体をフローティングする方法です。

# これら 3 つのメソッドによってそれぞれ実装されたアダプティブレイアウト (3 列) を見てみましょう

1. 絶対配置を使用して幅アダプティブレイアウトを設定します。

説明: アダプティブモジュールに絶対配置を使用し、左右の列の幅を設定します。原理と高さは自動的に調整されます。適応は同じで、左列と右列はそれぞれ左と右にフロートします。

絶対位置設定の幅アダプティブレイアウトコードは次のとおりです。

<body>
        <div class="left">200px</div>
        <div class="main">自适应</div>
        <div class="right">200px</div>
</body>

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.left,
.right {
    width: 200px;
    display: inline;
    height: 100%;
    background-color: greenyellow;
}

.left {
    float: left;
}

.right {
    float: right;
}

.main {
    position: absolute;
    left: 200px;
    right: 200px;
    height: 100%;
    background-color: pink;
    display: inline;
}

幅アダプティブレイアウトの効果は次のとおりです。

アダプティブレイアウトとは何ですか?アダプティブレイアウトを実装するにはどうすればよいですか?

#2. マージンを使用して、最初に中央のモジュールがレンダリングされ、幅適応レイアウトが設定されます。注: 中央の列が最初にレンダリングされます。アダプティブ 3 列レイアウトと優先レンダリング (読み込み) の鍵: コンテンツは HTML の最初に配置する必要があります。アダプティブ div は左右の前に配置し、親 div に含める必要があります。親 div、left および right モジュールはすべて左にフローティングし、アダプティブ div (つまり、親 div 内の子 div) に margin: 0 200px を設定し、 left の margin-left 属性値をに設定します。 100% の負の数、つまり margin-left: -100%; right の margin-left の属性値を、その幅の負の数、margin-left: -200px に設定します。

注:

アダプティブ div は左右の前に配置し、親 div に含める必要があります。

マージンを使用して、中間モジュールは最初に次のように幅適応レイアウトを設定するコードをレンダリングします:

<body>
        <div class="main"> <!--看清楚，这里用一个父div包住-->
            <div class="content">自适应</div>
        </div>
        <div class="left">200px</div>
        <div class="right">200px</div>
</body>

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    width: 100%;
    height: 100%;
    float: left;
}
.main .content {
    margin: 0 200px;
    background-color: pink;
    height: 100%;
}
.left,
.right {
    width: 200px;
    height: 100%;
    float: left;
    background-color: greenyellow;
}
.left {
    margin-left: -100%; //important
}
.right {
    margin-left: -200px; //important
}

幅適応レイアウトの効果は次のとおりです。

3. 独自のフローティングを使用して幅適応レイアウトを設定します。 手順: 中央の列の設定 margin 属性は、左列と右列をそれぞれフローティングにすることです。注: この方法を使用してレイアウトを調整する場合は、HTML の左右の後ろにアダプティブ列を配置する必要があります。

独自の float を使用して幅アダプティブレイアウトを設定するコードは次のとおりです。

<body>        
        <div class="left">200px</div>
        <div class="right">200px</div>
        <div class="main">自适应</div>
</body>

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    margin: 0 200px;
    height: 100%;
    background-color: pink;
}
.left,
.right {
    width: 200px;
    height: 100%;
    background-color: greenyellow;
}
.left {
    float: left;
}
.right {
    float: right;
}

幅アダプティブレイアウトの効果は次のとおりです。

##最後に:
知りたい場合は、この記事はここで終わります。アダプティブレイアウトの詳細については、2018 の最新の 8 つのレスポンシブおよびアダプティブビデオチュートリアルの推奨事項をご覧ください。これには、最新の無料ビデオチュートリアルが含まれています。

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

声明：

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

前の記事：レスポンシブとは何ですか?レスポンシブレイアウトの詳細な紹介次の記事：レスポンシブとは何ですか?レスポンシブレイアウトの詳細な紹介

関連記事

続きを見る