So implementieren Sie ein responsives Layout in CSS-CSS-Tutorial-php.cn

So implementieren Sie ein responsives Layout in CSS

青灯夜游

Freigeben： 2023-01-06 11:12:52

Original

13423 Leute haben es durchsucht

So implementieren Sie ein responsives Layout mit CSS: 1. Verwenden Sie ein Flex-Layout, das den Vorteil eines einfachen Codes und eines praktischen Layouts bietet. 2. Verwenden Sie ein absolutes Layout in Kombination mit Medien, um ein responsives Layout zu erzielen Vorteil des einfachen Schreibens; 4. Verwenden Sie das Float-Layout, das den Vorteil einer besseren Kompatibilität hat.

So implementieren Sie ein responsives Layout in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Eine kurze Einführung in die vier Möglichkeiten des responsiven Layouts

Der gesamte HTML-Code

<body>
    <div class="box">
        <div class="left">left</div>
        <div class="center">中间</div>
        <div class="right">right</div>
    </div>
</body>

Nach dem Login kopieren

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

Nach dem Login kopieren

Vorteile

Einfacher Code und praktisches Layout

Nachteile

Wenn sich in der Mitte Inhalt befindet, wird dieser nicht kleiner, wenn er auf das Minimum reduziert wird.
Und die Breite der linken und rechten Seite wird kleiner.

So implementieren Sie ein responsives Layout in CSS

Absolutes Layout

Sie können Medien in Kombination verwenden. Implementieren Sie ein reaktionsfähiges Layout.

Nachteile

Das Schreiben des Codes ist kompliziert und das Layout ist umständlich Bei weniger als 600 deckt die rechte Seite die linke Seite ab

Rasterlayout
kann nicht weiter verkleinern

Die Breite wird festgelegt. Wenn die Breite der Webseite kleiner als die feste Breite ist, kann der untere Teil verschoben werden

Float-Layout

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

Nach dem Login kopieren

.box{
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 100px;
}
.left,.right{
    background-color: pink;
}
.center{
    background-color: burlywood;
}

Nach dem Login kopieren

Vorteile

Relativ einfach und bessere Kompatibilität

Nachteile

Die beiden in derselben Reihe schwebenden Blöcke müssen in der richtigen Reihenfolge sein Schreiben Sie zusammen (das heißt, das p von links und rechts). werden der Reihe nach geschrieben

Nachdem die Komprimierung kleiner wird, werden Zeilenumbrüche generiert

Der mittlere Inhalt verschwindet nicht

Lösung

```
<div class="box">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>
```
Nach dem Login kopieren
Das dritte Problem
Flex-Layout Die Höhe des übergeordneten Elements kann kann entsprechend jeder Innenhöhe erweitert werden
Das Rasterlayout kann auch entsprechend jeder Innenhöhe erweitert werden
- Teilen von Lernvideos:
- CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein responsives Layout in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!