Responsive Design with CSS Viewport Units

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 .

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
K2B Solutions

Thanks for sharing the information,vm and vh is new things to learn.

Stoyan

You can try the simple made conversion tool [url=http://pxtovh.com]http://pxtovh.com[/url].

2
0
Would love your thoughts, please comment.x
()
x