CSSでレスポンシブレイアウトを実装する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

青灯夜游

May 13, 2021 pm 01:56 PM

cssレスポンシブレイアウト

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;
}

利点

書きやすい

欠点

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

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

フロートレイアウト

<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 番目の問題