Viewport Percentage Units in CSS

AdaptableSugilite avatar
AdaptableSugilite
·
·
Download

Start Quiz

Study Flashcards

3 Questions

What units are assigned to the new viewports?

lvw, lvh, lvi, lvb, lvmin, and lvmax for the large viewport, and svw, svh, svi, svb, svmin, and svmax for the small viewport.

How does the size of viewport-percentage units change?

The sizes of these viewport-percentage units are fixed (and therefore stable) unless the viewport itself is resized.

How does the size of the dynamic viewport adapt?

The dynamic viewport has a size that adapts to the presence or absence of dynamic toolbars. When the dynamic toolbars are expanded, the dynamic viewport is equal to the size of the small viewport. When the dynamic toolbars are retracted, the dynamic viewport is equal to the size of the large viewport.

Study Notes

  • The new viewports have units assigned to them: lvw, lvh, lvi, lvb, lvmin, and lvmax for the large viewport, and svw, svh, svi, svb, svmin, and svmax for the small viewport.
  • The sizes of these viewport-percentage units are fixed (and therefore stable) unless the viewport itself is resized.
  • The large viewport is sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted. The small viewport is sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.
  • The dynamic viewport has a size that adapts to the presence or absence of dynamic toolbars. When the dynamic toolbars are expanded, the dynamic viewport is equal to the size of the small viewport. When the dynamic toolbars are retracted, the dynamic viewport is equal to the size of the large viewport.

Test your knowledge about viewport-percentage units like lvw, lvh, lvi, lvb, svw, svh, svi, svb, svmin, and svmax in CSS, and understand how they are sized based on the viewport and UA interface dynamics.

Make Your Own Quizzes and Flashcards

Convert your notes into interactive study material.

Get started for free

More Quizzes Like This

Use Quizgecko on...
Browser
Browser