CSS の一般的なアダプティブ レイアウトは何ですか?

CSS の一般的なアダプティブ レイアウトには、左側の固定幅と右側のアダプティブ、両側の固定幅と左側のアダプティブ レイアウト、および中央のアダプティブ レイアウトが含まれます。 ## 今日はレイアウトに合わせた一般的な自動レイアウトを紹介しますので、皆さんの参考になれば幸いです。次に、記事内でアダプティブ レイアウトのいくつかの方法を詳しく紹介します。

[おすすめコース:

CSS コース ]

アダプティブ レイアウト:

アダプティブ レイアウトの特徴は、以下に基づいていることです。デバイスは画面サイズに適応します。つまり、各静的レイアウトでは、ウィンドウ サイズの調整に応じてページ要素が変化します。

方法 1

左側が固定、右側がアダプティブで、一般的にモバイルWebでの一覧表示に使用されます

HTMLコード

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

実装方法: 親要素に絶対位置を与え、子要素が要素は親要素の高さを伸ばすことができ、片側は固定幅、左側は固定幅、右側は指定されたパーセンテージで幅と高さを調整できます。

 <style type="text/css">
    .box{
         position: absolute;
        width:100%;
        height: 100%;
    }
     .left{
            width:200px;
            height:100%;
            background: pink;
            float: left;
        }
        .right{
            width:100%;
            height:100%;
            background: skyblue;
        }
    </style>

レンダリング:

方法 2

#左側に適応型、右側に固定幅を使用して
#display:table-cell 属性を使用して label 要素を作成しますtd ラベルと同様に、テーブル セルの形式で存在します。この属性は E8 以降のブラウザにのみ適用され、他の最新のブラウザはこの属性をサポートしています。この属性を使用すると、アダプティブ レイアウトが簡素化されます。

HTML コード:

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

実装方法: 親要素を table 要素に設定し、display:table-cell を通じて完了します

.box{
    position: absolute;
     width:100%;
    height: 100%;
    display: table;
    table-layout: fixed;
    }
.left {
    width: 200px;
    height:100%;
    display:table-cell;
    background: pink;
    }

.right {
   display: table-cell;
   width:100%;
   height: 100%;
   display: table-cell;
     background: skyblue;
        }
    </style>

レンダリング:

方法 3

両側の幅を固定し、中央で適応する HTML コード

<div class="box">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
    </div>

実装方法: flex 属性は、フレックス ボックス モデル オブジェクトの子要素がスペースを割り当てる方法を設定または取得するために使用されます。

 .box{
 position: absolute;
 display: flex;
 width: 100%;
 height: 100%;
    }
 .left {
 width: 200px;
height:100%;
 float:left;
background: pink;}
.content{
float: left;
height: 100%;
flex: 1;
 background-color:#f1f19b;
}
.right {
 display: table-cell;
width:200px;
height: 100%;
 float: left;
background: skyblue;
        }

レンダリングは次のとおりです:

要約: 上記がこの記事の全内容です。この記事を通じて、皆さんが学んでいただければ幸いです。アダプティブレイアウトについての一定の理解。

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