CSS erreicht hochadaptiven Vollbildmodus

Beim Schreiben meiner eigenen Demo möchte ich display:flex verwenden, um eine vertikale Zentrierung zu erreichen. Der Code lautet wie folgt:

<Stil>
    #Login{
        Breite: 100 %;
        Höhe: 100%;
        Anzeige: Flex; 
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
    }
    .login-body{
        Breite: 600px;
        Höhe: 260px;
        Rand: 1px durchgezogen #000;
    }
</Stil>

Der gewünschte Effekt wird nicht erzielt, da die Höhe des äußeren übergeordneten Elements nicht den gesamten Bildschirm ausfüllt. .

Lösung: Geben Sie #login eine Mindesthöhe von 100vh und verwenden Sie display: flex; justify-content: center; align-items: center;, um eine vertikale Zentrierung zu erreichen.

<Stil>
    #Login{
        Breite: 100 %;
        Mindesthöhe: 100vh;
        Anzeige: Flex; 
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
    }
    .login-body{
        Breite: 600px;
        Höhe: 260px;
        Rand: 1px durchgezogen #000;
    }
</Stil> 

Ansichtsfenstereinheiten

Was ist ein Ansichtsfenster?

Auf dem Desktop bezeichnet der Viewport den sichtbaren Bereich des Browsers, auf der mobilen Seite handelt es sich dabei um 3 Viewports: Layout Viewport, Visual Viewport und Ideal Viewport.

Das „Ansichtsfenster“ in der Ansichtsfenstereinheit bezieht sich auf den sichtbaren Bereich des Browsers auf dem Desktop, auf der mobilen Seite bezieht es sich auf das Layout-Ansichtsfenster im Ansichtsfenster und das „Ansichtsfenster“ bezieht sich auf die Größe des sichtbaren Bereichs innerhalb des Browsers, d. h. die Größe von window.innerWidth/window.innerHeight, die die Browserbereichsgröße der Taskleiste, der Titelleiste und der unteren Symbolleiste nicht einschließt. .

Gemäß der CSS3-Spezifikation umfassen Ansichtsfenstereinheiten hauptsächlich die folgenden 4:

1.vw: 1vw entspricht 1 % der Ansichtsfensterbreite und die Ansichtsfensterbreite beträgt 100vw.

2.vh: 1vh entspricht 1 % der Ansichtsfensterhöhe und die Ansichtsfensterhöhe beträgt 100Vh.

3.vmin: Wählen Sie den kleinsten Wert zwischen vw und vh.

4.vmax: Wählen Sie den größten Wert zwischen vw und vh.

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS hochadaptive Inhalte erstellen, die den gesamten Bildschirm ausfüllen. Weitere relevante hochadaptive CSS-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!