検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでレスポンシブレイアウトを実装する方法

CSSでレスポンシブレイアウトを実装する方法

青灯夜游
青灯夜游オリジナル
2021-05-13 13:56:0813439ブラウズ

CSS でレスポンシブ レイアウトを実装する方法: 1. シンプルなコードと便利なレイアウトの利点があるフレックス レイアウトを使用します; 2. レスポンシブ レイアウトを実現するためにメディアと組み合わせた絶対レイアウトを使用します; 3. グリッド レイアウトを使用します, というメリットがあります 書きやすい; 4. 互換性が高いというメリットがある float レイアウトを使用します。

CSSでレスポンシブレイアウトを実装する方法

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

#レスポンシブ レイアウトの 4 つの方法の簡単な紹介

合計 HTML コード
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">中间</div>
        <div class="right">right</div>
    </div>
</body>

flex Layout
.box{
    width: 100%
    height: 100px;
    display: flex;
}
.left{
    width: 300px;
    background-color: purple;
}
.center{
    flex: 1;
    background-color: pink;
}
.right{
    width: 300px;
    background-color: burlywood;
}

#利点

シンプルなコードと便利なレイアウト
欠点

#真ん中にコンテンツがある場合、最小まで縮小しても小さくなりません

##また、左右の幅が小さくなります
##絶対レイアウト

CSSでレスポンシブレイアウトを実装する方法

.box{
    position: relative;
    width: 100%;
    height: 100px;
}
.left{
    position: absolute;
    left: 0px;
    width: 300px;
    background-color: pink;
}
.right{
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: pink;
}
.center{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: burlywood;
}
@media (max-width: 600px){
    .left,.right{
       /* 平分屏幕 */
        width: 50%;
    }
}

メリット

メディアを組み合わせることでレスポンシブレイアウトが実現可能

    デメリット

コード記述が複雑でレイアウトが面倒メディアを使用して分割しない場合画面が均等で、幅が 600 未満の場合、右側が左側を覆います。

  • #グリッド レイアウト
  • .box{
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 100px;
}
.left,.right{
    background-color: pink;
}
.center{
    background-color: burlywood;
}
利点

書きやすい

欠点
コンテンツが途中にあると、縮小し続けることができません

幅は固定されます。ウェブページの幅が固定幅より小さい場合、下部をスライドさせることができます

  • フロートレイアウト
    CSSでレスポンシブレイアウトを実装する方法
    • フローティング フローは右と中央の位置を変更する必要があります
<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>
errree

利点

比較的シンプルで互換性が良好

欠点
同じ行に浮いている 2 つのブロックは順番に並んでいる必要があります。それらを一緒に書きます (つまり、左右の p は次のように書かれます)順序

#圧縮が小さくなると改行が生成される##真ん中のコンテンツは消えません

  • #解決策
  • .box{
    height: 200px;
}
.left{
    float: left;
    width: 300px;
    background-color: pink;
}
.right{
    float: right;
    width: 300px;
    background-color: pink;
}
.center{
    margin:0 300px;
    background-color: burlywood;
}

    3 番目の問題CSSでレスポンシブレイアウトを実装する方法
#フレックス レイアウトは、内部の高さに基づいて親要素の高さを拡張できます

グリッド レイアウトは、親要素の高さも拡張できます内部の高さに応じた親要素

学習ビデオ共有:

css ビデオ チュートリアル

以上がCSSでレスポンシブレイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 html Float flex
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで文字色のグラデーションを設定する方法次の記事：CSSで文字色のグラデーションを設定する方法

関連記事

続きを見る