CSS Viewport Units: What They Mean (vh, dvh, svh etc.)

The table below can be used as a reference to check the meaning of the unit.

E.g. height: 20dvh is 20% of “current viewport height, excluding user agent’s interface…”

UnitDescription
svhSmallest possible viewport height visible to the user, excluding interface elements.
lvhLargest possible viewport height visible to the user.
dvhCurrent viewport height, excluding user agent’s interface. Updates with changes in viewport height.
svwSmallest possible viewport width visible to the user. Static value.
lvwLargest possible viewport width visible to the user. Static value.
dvwCurrent viewport width visible to the user. Dynamic value.
svminSmallest value between svh and svw.
lvminSmallest value between lvh and lvw.
dvminSmallest value between dvh and dvw.
svmaxLargest value between svh and svw.
lvmaxLargest value between lvh and lvw.
dvmaxLargest value between dvh and dvw.
viViewport size in the inline direction (width for English text, height for Chinese text).
sviSmallest possible viewport size in the inline direction.
lviLargest possible viewport size in the inline direction.
dviCurrent viewport size in the inline direction.
vbViewport size in the block direction (height for English text, width for Chinese text).
svbSmallest possible viewport dimension in the block direction.
lvbLargest possible viewport dimension in the block direction.
dvbCurrent viewport dimension in the block direction.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *