Responsive Design with CSS Viewport Units

Responsive design makes it possible to adapt a website to any screen.

In responsive design, the size of a site’s elements change based on the browser size and CSS media queries.

Viewport units is an interesting CSS feature that allows you to automate some aspects of your responsive design.

Using viewport units, the sizes of specific elements can become smaller if the browser does the same.

Instead of pixel, em or percentage values, you can use these settings:

• vw: the percentage of the browser’s width
• vh: the percentage of the browser’s height
• vmin: the minimum percentage of browser’s height or width, the smallest value of both
• vmax: the maximum percentage of browser’s height or width, the smallest value of both

A font-size example

This will change the font-size based on the screen width:

{codecitation css}h1 {
font-size: 7vw;
}{/codecitation}

7vw represent 7% of the screen pixel width.

A column width example

This will change the column width based on the screen width:

{codecitation css}.block {
width: 20vw;
}{/codecitation}

20vw represent 20% of the screen pixel width.

A column height example

This will change the column height based on the screen height:

{codecitation css}.block {
height: 85vh;
}{/codecitation}

85vh represent 85% of the screen pixel height.

Want to see a demo?

There’s a demo available here

Resize the window to see it in action. This demo will automatically resize fonts, column widths and column heights using viewport units.

Browser support

CanIUse.com has a useful overview of which browsers support viewport units .