Viewport units in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are viewport units in CSS?

Viewport units are CSS units that represent a percentage of the browser's visible area. They help make designs responsive by sizing elements relative to the screen size.

beginner

What does 1vw represent?

1vw means 1% of the viewport's width. For example, if the browser width is 1000px, 1vw equals 10px.

beginner

Name the four main viewport units in CSS.

• vw: 1% of viewport width
• vh: 1% of viewport height
• vmin: 1% of smaller viewport dimension (width or height)
• vmax: 1% of larger viewport dimension (width or height)

beginner

Why use viewport units instead of fixed pixels?

Viewport units let elements resize automatically with the browser window. This makes your page look good on phones, tablets, and desktops without extra code.

intermediate

How does vmin behave when viewport width is 800px and height is 600px?

vmin uses the smaller viewport dimension. Here, height is smaller (600px), so 1vmin equals 6px (1% of 600px).

Which viewport unit represents 1% of the viewport height?

A vh

B vw

C vmin

D vmax

vh stands for viewport height, so 1vh is 1% of the viewport height.

If the viewport width is 1200px, what is the pixel value of 5vw?

A 5px

B 12px

C 60px

D 240px

5vw means 5% of 1200px, which is 0.05 × 1200 = 60px.

Which viewport unit uses the larger dimension of width or height?

A vw

B vmax

C vmin

D vh

vmax uses the larger of the viewport width or height.

Why are viewport units useful in responsive design?

A They fix element sizes in pixels

B They only work on desktop browsers

C They replace media queries completely

D They allow elements to scale with screen size

Viewport units let elements resize automatically as the screen size changes, helping responsiveness.

What does 10vmin mean if viewport width is 900px and height is 700px?

A 70px

B 90px

C 100px

D 10px

vmin uses the smaller dimension (700px), so 10vmin = 10% of 700px = 70px.

Explain what viewport units are and list their four types.

Think about how viewport units relate to screen size percentages.

Describe a situation where using viewport units improves a website's design.

Imagine viewing a website on a phone versus a desktop.