Heim > Artikel > Web-Frontend > So implementieren Sie ein responsives Layout in CSS

So implementieren Sie ein responsives Layout in CSS

青灯夜游Original: 2021-05-13 13:56:0813419Durchsuche

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.

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>

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

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

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

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>

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!

html5 css css3 html Float flex

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So legen Sie den Schriftfarbverlauf in CSS festNächster Artikel：So legen Sie den Schriftfarbverlauf in CSS fest

In Verbindung stehende Artikel

Mehr sehen