CSS, um den Vollbildmodus zu erreichen

CSS (Cascading Style Sheets) ist eine Auszeichnungssprache, die zur Beschreibung des Erscheinungsbilds und Stils von Webseiten verwendet wird. Es kann HTML-Dokumenten Stil, Layout und interaktive Effekte hinzufügen. Bei der Front-End-Entwicklung ist es häufig erforderlich, einen Vollbildeffekt zu erzielen. In diesem Artikel wird erläutert, wie Sie mit CSS einen Vollbildeffekt erzielen.

1. Vollbild-Attribut

Das Vollbild-Attribut (Fullscreen-API) wurde in CSS3 eingeführt, das es Entwicklern ermöglicht, einige Elemente oder die gesamte Seite im Vollbildmodus auf einer Webseite anzuzeigen. Über das Vollbild-Attribut können Sie bestimmte Vorgänge ausführen, wenn das Browserfenster im Vollbildmodus angezeigt wird. Durch die Verwendung dieses Attributs können Webprogramme eine bessere Benutzererfahrung erzielen.

Die Syntax dieses Attributs lautet wie folgt:

element:fullscreen{
    /*全屏样式*/
}

Wenn der Benutzer die Vollbildtaste drückt oder andere Standard-Vollbildvorgänge ausführt, wird das Element vom Browser vergrößert, um den gesamten Bildschirm auszufüllen. Beim Verlassen des Vollbildzustands kehrt das Element zu seiner ursprünglichen Größe und Position zurück.

Es ist zu beachten, dass das Vollbildattribut nur von unterstützten Browsern erkannt werden kann, darunter Chrome, Firefox, Safari und IE11.

2. Vollbildeffekt erzielen

Im Folgenden zeigen wir, wie Sie mit der Vollbild-API den Vollbildmodus für einzelne Elemente und den Vollbildmodus für die gesamte Seite erreichen.

1. Vollbild für einzelne Elemente implementieren

Fügen Sie zunächst ein Element hinzu, das im Vollbildmodus in HTML angezeigt werden soll, zum Beispiel:

<div id="fullscreen">
    ...
</div>

Dann fügen Sie den folgenden Code im CSS-Stil hinzu:

#fullscreen {
    width: 100%;
    height: 100%;
}

#fullscreen:fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #fff; /*全屏时的背景色*/
}

In der Code, legen Sie zunächst fest, dass die Breite des Elements und die Höhe beide 100 % sind. Als nächstes wurde dem Vollbildattribut (:fullscreen) ein zusätzlicher Stil hinzugefügt, einschließlich der Festlegung des Elements auf eine feste Positionierung (position:fixed), sodass seine Position auf dem Browserfenster und nicht auf dem übergeordneten Element basiert. Stellen Sie außerdem die Breite und Höhe des Elements auf 100 % ein. Um schließlich das Vollbildelement über anderen Elementen zu positionieren, setzen Sie den Z-Index auf 999. Darüber hinaus können zusätzliche Stile hinzugefügt werden, um die Hintergrundfarbe, Schriftarten und andere Stile im Vollbildmodus zu ändern.

2. Vollbildeffekt für die gesamte Seite erzielen

Um den Vollbildeffekt für die gesamte Seite zu erzielen, können Sie den Vollbildstil zu den HTML- und Body-Elementen hinzufügen:

html:fullscreen, 
body:fullscreen {
    height: 100%;
    overflow: hidden;
}

Hier stellen Sie beide Elemente auf Vollbild ein, und Dann setzen Sie ihre Höhe auf 100 %. Um außerdem zu verhindern, dass Bildlaufleisten im Vollbildmodus angezeigt werden, legen Sie das Überlaufattribut auf „Ausgeblendet“ fest. Wenn der Benutzer auf diese Weise die Vollbildtaste im Browser drückt, wird die gesamte Seite auf die Bildschirmgröße vergrößert.

Es ist zu beachten, dass der Browser bei Verwendung der Vollbild-API möglicherweise Autoplay-Funktionen wie die automatische Wiedergabe von Audio und Video deaktiviert. Darüber hinaus können Tastatur- und Mausereignisse im Vollbildmodus unterschiedlich sein.

3. Zusammenfassung

Es ist sehr einfach, den Vollbildeffekt mit CSS zu erzielen, Sie müssen lediglich einige CSS-Eigenschaften hinzufügen. Sie können die Vollbild-API verwenden, um Elemente auf einer Webseite so festzulegen, dass sie im Vollbildmodus angezeigt werden, um eine bessere Benutzererfahrung zu bieten. Es ist zu beachten, dass das Vollbildattribut nur in unterstützten Browsern gültig ist und es im Vollbildmodus möglicherweise einige Einschränkungen gibt.

Das obige ist der detaillierte Inhalt vonCSS, um den Vollbildmodus zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!