Während ich eine Anwendung mit Rails im Lehrplan einer bestimmten Programmierschule erstellte, war ich in der Lage, die Größe von Vollbild-Anzeigeelementen wie Hintergrundbildern unter Berücksichtigung des Ansichtsfensters festzulegen.
.hoge {
width: 100vw;
height: 100vh;
}
Ich habe geschrieben, aber die vorbildliche Antwort lautet
.hoge {
width: 100%;
height: 100vh;
}
Obwohl sie gleich aussehen, habe ich mich gefragt, warum dieser Unterschied war ... und verschiedene Suchanfragen durchgeführt.
** Verwenden Sie 100vh, um Elemente auf voller Seitenhöhe zu platzieren 100% wird häufig verwendet, wenn das Element so angeordnet wird, dass es die Breite der Seite ausfüllt **
Ich habe einige Erklärungen zum Inhalt gesehen. Ich habe mich gefragt, warum ich es richtig benutzt habe, also habe ich es untersucht.
Lassen Sie uns zunächst einen Rückblick geben.
viewport Bezieht sich auf den vom Browser angezeigten Bereich. In der heutigen Welt, in der Browser nicht nur von PCs, sondern auch von Smartphones und Tablets aus betrachtet werden, ist es wichtig, das Erscheinungsbild von Seiten zu schaffen, die sich des Ansichtsfensters bewusst sind.
vw(viewport width) Eine Einheit, die die Breite als Prozentsatz der Breite des Ansichtsfensters angibt. 1vw = 1% der im Browser angezeigten Breite
vh(viewport height) Eine Einheit, die die Höhe als Prozentsatz der Höhe des Ansichtsfensters angibt. 1vh = 1% der im Browser angezeigten Höhe
An dieser Stelle möchte ich CSS für Vollbildanzeigeelemente mit vw und vh angeben, aber warum heißt es, dass "die Breite des Vollbildelements im Allgemeinen% und die Höhe vh beträgt"? Oder nicht?
Beherrschen der Angabe von CSS-Breite und -Höhe )
Hier möchte ich auf den Unterschied zwischen 100% und 100vh achten. 100% ist das Verhältnis zum übergeordneten Element. 100vh ist das Verhältnis zum Ansichtsfenster (Bildschirmgröße).
** Über die Breite **
Wenn die Breite bis zum Körper überhaupt nicht von px angegeben wird, ist die Breite des Browsers = die Breite des Körpers. Mit anderen Worten, die Breite des Körpers ändert sich abhängig vom Anzeigeterminal und der Größe des Browserfensters.
Aus dem obigen Zitat können wir erkennen, dass width ** die Breite des body-Elements ** ist, wenn für das übergeordnete Element kein px angegeben ist. Mit anderen Worten, 100% Breite für das Körperelement (übergeordnetes Element) hat in diesem Fall dieselbe Bedeutung wie der Browserstandard 100vw. Infolgedessen entspricht die Breite 100% des Vollbild-Hintergrundelements 100vw, sodass "Breite ist%" in diesem Fall als gut angesehen wird.
** Über Höhe **
Sofern in CSS nicht anders angegeben, ist der Elementhöhenwert automatisch und die Höhe wird automatisch ermittelt. Im Gegensatz zu width: auto, das sich grundsätzlich horizontal erstreckt, erstreckt sich height: auto nicht vertikal. Es ist so hoch wie der Inhalt von Elementen wie Zeichen und Bildern. Befindet sich ein untergeordnetes Element im Inneren, erhöht sich die Höhe entsprechend.
Aus dem obigen Zitat können wir sehen, dass ** "Höhe des übergeordneten Elements = Höhe des Inhalts" **. Mit anderen Worten, wenn keine Referenzhöhe vorhanden ist, kann das untergeordnete Element nicht in% angegeben werden. Daher scheint vh für Elemente wie Vollbildhintergründe die Höhe als Höhenreferenz für den Browser angeben zu müssen.
Aus diesem Kommentar in diesem Fall
--Wenn Sie das Element so anordnen, dass es die Breite der Seite ausfüllt → 100%, weil es genauso aussieht wie 100vw
Es war erfrischend, dass es das bedeutete.
Ich bin noch ein Anfänger, um mein Wissen zu verbessern Ich möchte mich weiterhin des Verständnisses des ursprünglichen "Mechanismus" der Methode bewusst sein, nicht nur der "Methode" dieser Art von Dingen.
Ich hoffe, Sie finden es hilfreich. Vielen Dank für das Lesen bis zum Ende.
2020/10/31 [CSS] Ansichtsfenster (vw, vh) und Prozentsatz (%), eine intelligente Methode zur Verwendung von Einheiten, die für die Reaktionsfähigkeit geeignet sind In diesem Artikel wird die Spezifikation width% angegeben
"Vw" bestimmt seine Größe basierend auf der Breite des Ansichtsfensters. Die Breite dieses Ansichtsfensters wird anhand der Größe einschließlich der Bildlaufleiste des Browsers berechnet. Wenn die Seite lang ist und die Bildlaufleiste sichtbar ist, ist die Breite des Ansichtsfensters breiter als die Breite des HTML-Elements. Wenn Sie ein Element auf "100vw" setzen, ist das Element daher größer als HTML und Body.
So verhindern Sie eine Fehlausrichtung, wenn eine Bildlaufleiste vorhanden ist Es wird erklärt, dass die Breite in% angegeben werden sollte. Ich war mehr überzeugt ...!
[CSS] Ansichtsfenster (vw, vh) und Prozentsatz (%), eine intelligente Methode zur Verwendung von Einheiten, die für die Reaktionsfähigkeit geeignet sind Aktive Ingenieure erklären den Unterschied zwischen 100vh und 100%, der die Höhe der Elemente mit CSS [für Anfänger] angibt
Wenn du es nicht weißt, verlierst du! Die Erstellung einer reaktionsschnellen Site wird durch Beherrschen von CSS vh / vw fortgesetzt. )