Modern websites must work on many screen sizes.
Viewport units help you size elements based on the screen itself.
What Is the Viewport
The viewport is the visible area of the browser window.
CSS can use the viewport size to control layouts.
Viewport Units Explained
CSS provides four main viewport units:
- vw
- vh
- vmin
- vmax
vw Unit
vw stands for viewport width.
1vw is equal to 1 percent of the browser width.
This makes the element span the full width of the screen.
vh Unit
vh stands for viewport height.
1vh is equal to 1 percent of the browser height.
This makes the banner half the screen height.
vmin Unit
vmin uses the smaller value between viewport width and height.
This keeps the box square on any screen.
vmax Unit
vmax uses the larger value between viewport width and height.
This makes the text scale with the larger screen dimension.
When to Use Viewport Units
Use viewport units when:
- Creating full-screen sections
- Making responsive banners
- Scaling text with screen size
Why This Matters for Jobs
Modern UI design depends on responsiveness.
Knowing viewport units makes you a stronger frontend developer.
Common Beginner Mistakes
- Making text too big with viewport units
- Forgetting to test on small screens
- Using only viewport units for everything
Best Practice
Combine viewport units with rem and % for balanced designs.
Practice Task
Try this:
- Create a section that is 100vh tall
- Make a heading sized with vw
- Create a square using vmin
What You Will Learn Next
In the next lesson, you will learn how to control spacing using margin and padding.