Image for post
Image for post

Viewport-Based CSS Measurements

I wish I knew how to use viewport-based measurements before!

Joshua Cerbito
May 12, 2017 · 2 min read

Let’s kick the series off with a quick one.

When I was starting out with my development career, I only knew how to use pixels and percentages. It was back in the day when the word “responsive” wasn’t yet a buzzword, and making something respond perfectly to the viewports’ dimensions was impossible without JavaScript.

Fast-forward to 2010, CSS3 came along and it introduced a lot of new features including viewport-based measurement units. That’s what we’re looking at today.

The Units

  • vh: represents 1% of the viewport’s height

One important thing to remember is that these units will ALWAYS be relative to the viewport. The only exception here is if you’re using it inside an iframe (since they are sort of separate windows on their own).

Let’s See it in Action

Simple modal implementation

The use of vw and vh above were pretty straight-forward. But some of you might be saying “But I can also achieve this using %, why use vh and vw?”

Let’s look at another example. Suppose we’re creating a site/app similar to the Clear app, and we want it to always be able to accommodate 4 items in the screen, and clicking on an item will make it expand to cover the whole viewport. How do we do it?

How easy was that? Using vh, we were able to meet all the requirements without lengthy % calculations, and without using JavaScript to determine the height of the viewport.

Combining it with calc()

.modal-body {
max-width: 800px;
width: calc(100vw - 80px);
margin: 0 auto;
}

This will force the .modal-body to always be 80px less than the viewport’s width (hence giving it a 40px horizontal space on both sides), but ensure that it’ll never go pass 800px.

There’s still a lot you can do with these, but I’ll leave it up to your creativity and imagination. I hope this helped!

Browser Support

  • Firefox 19+
  • Chrome 34+
  • Safari 7+
  • Android 4.4+
  • iOS 6+

For more info, you can read the full documentation in Can I Use.

I Wish I Knew That Before

As the title suggests, in this series I’ll be sharing a…

Joshua Cerbito

Written by

Web Developer. Street Photographer. Christian Apologist.

I Wish I Knew That Before

As the title suggests, in this series I’ll be sharing a collection of tips, tricks, techniques, and concepts I wish I knew early on in my dev career. My hope is that other developers will find it useful too. Enjoy!

Joshua Cerbito

Written by

Web Developer. Street Photographer. Christian Apologist.

I Wish I Knew That Before

As the title suggests, in this series I’ll be sharing a collection of tips, tricks, techniques, and concepts I wish I knew early on in my dev career. My hope is that other developers will find it useful too. Enjoy!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store