CSSアダプティブレイアウトの詳しい解説

今回は CSS アダプティブ レイアウトについて詳しく説明します。CSS アダプティブ レイアウトの 注意点 とは何ですか? 実際の事例を見てみましょう。

前書き

この記事では、ページ レイアウトのアダプティブ レイアウトを紹介します。一般的なアダプティブ レイアウトには、左列が固定で右列がアダプティブ、左右の列が固定で中央がアダプティブの 2 つがあります。適応的な。

1. 左の列は固定、右の列はアダプティブ レイアウト スキームです

説明: 左の列は固定、右の列はアダプティブです。また、右の列を固定して左の列もアダプティブです。これは、ミッドエンドの管理インターフェイスやモバイル Web リストなどで一般的です。

<p class="container">
    <p class="left">固定宽度</p>
    <p class="right">自适应</p>
</p>

1.1 子要素 float:left

説明: 左側の固定列は float:left に設定され、右側の適応列は float:none に設定されます。

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: none;
    width: 100%;
    height: 100%;
    background-color: #9dc3e6;
}

1.2 子要素 width:calc()

説明: アダプティブ列の幅は、親コンテナの幅 - 固定列の幅など、calc() に基づいて自動的に計算されます。

ブラウザのサポート: IE 9+。

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: #9dc3e6;
}

1.3 親要素のdisplay: table

説明: 親コンテナがdisplay: tableとtable-layout:fixedを使用する場合、子コンテナは親コンテナの幅を均等に分割します。このとき、特定の列の幅が残りの列で均等に分割され続けます。

ブラウザのサポート: IE 8+。

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;
}
.left {
    display: table-cell;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    display: table-cell;
    width: 100%;
    height: 100%;
    background-color: #9dc3e6;
}

1.4 親要素表示: flex

ブラウザサポート: IE 10+。

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
.left {
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    flex: 1;
    height: 100%;
    background-color: #9dc3e6;
}

2. 左右の列は固定で、中央はアダプティブです

<p class="container">
    <p class="left">左侧定宽</p>
    <p class="mid">中间自适应</p>
    <p class="right">右侧定宽</p>
</p>

2.1 子要素 width:calc()

説明: アダプティブ列の幅親コンテナの幅 - 固定列幅など、 calc() に従って自動的に計算されます。

ブラウザのサポート: IE 9+。

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
.mid {
    float: left;
    width: calc(100% - 100px - 100px);
    height: 100%;
    background-color: #9dc3e6;
}
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}

2.2 親要素の表示: flex

説明: 親要素が表示を flex に設定すると、1 つの列の flex は 1 になり、残りの列は固定幅に設定されます。

ブラウザのサポート: IE 10+。

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
.mid {
    float: left;
    height: 100%;
    flex: 1;
    background-color: #9dc3e6;
}
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンドのHTMLの基礎知識、

モバイル端末カルーセルを実装するためのvueプラグイン

CSSフロートボックスモデルの位置

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