Was ist der Unterschied zwischen% und vw in CSS?

Question

1vw = 1%, also, wenn sie 100% austauschbar sind, warum sie beide existieren? Ich glaube,% hängt von der Größe des Wrapper-Tags ab, aber vh hängt immer von der Fenstergröße ab, unabhängig von der Größe des Wrapper-Tags. Danke,

Answer 1

Sie sind nicht unbedingt austauschbar.

Das Verhalten hängt hauptsächlich von der Position des Elements im DOM ab, da dies den Inhalt des umschließenden Blocks des Elements bestimmt. Wenn ein Element eine Breite von 100% hat, hat es eine Breite von 100% der Breite des enthaltenen Blocks Breite. Wenn das Element eine Breite von 100vw hat, hat es eine Breite von 100% des Ansichtsfensters Breite (das Ansichtsfenster darf nicht das Element sein, das das Element enthält, aber die Ansichtsfenster-Prozenteinheiten sind immer relativ zum Ansichtsfenster).

Eine strikt prozentuale Breite wird immer relativ zur Breite eines anderen Elements sein, aber bei der Verwendung von Ansichtsfenster-Prozentlängen kann die Breite eines Elements tatsächlich relativ zur Höhe des Ansichtsfensters sein. Wenn ein Element beispielsweise eine Breite von 100vh hat, hat es eine Breite von 100% des Ansichtsfensters Höhe. Dies ist nicht möglich, wenn ausschließlich prozentuale Breiten verwendet werden.

Ansichtsfenster prozentige Länge wird immer in ihre initial containing block relativ sein, die das Darstellungsfeld ist:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

Ansichtsfenster prozentige Längen sind im Verhältnis zur Größe der initial containing block. Wenn die Höhe oder Breite des ursprünglichen umschließenden Blocks geändert wird, werden sie entsprechend skaliert.

Die Prozentsatzeinheiten werden an ihre Mutterelement relativ sein (dh ihre umschließenden Blocks), die den body/html Element sein, wobei in diesem Fall passieren kann, wird sie ähnlich sein Längen Darstellungsfeld-Prozent .

4.3. Percentages: the ‘<percentage>’ type

Prozentwerte sind auf einen anderen Wert immer relativ, beispielsweise eine Länge. Jede Eigenschaft, die Prozentsätze zulässt, definiert auch den Wert, auf den sich der Prozentsatz bezieht. Der Wert kann der Wert einer anderen Eigenschaft für dasselbe Element, eine Eigenschaft für ein Vorgängerelement oder ein Wert des Formatierungskontexts (z. B. die Breite eines enthaltenden Blocks) sein. Wenn für eine Eigenschaft des Stammelements ein Prozentwert festgelegt ist und der Prozentsatz als Verweis auf den geerbten Wert einer Eigenschaft definiert ist, entspricht der resultierende Wert dem Prozentsatz, der dem Anfangswert dieser Eigenschaft entspricht.