Viewport Units in CSS
Tags: css, html, webdev, discuss
Published: 2020-01-29 04:59:48

Over the past few years, **Responsive design** has become quite a hot topic in the web design community. There are various frameworks which help to build responsive design faster. One of the ways is using [Viewport percentage units](https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths "Viewport percentage units") or “Viewport Units” for short, a CSS3 property which helps you to automate some aspects of your responsive design.

Using viewport units, the size of specific elements can adapt to the varying size of a browser.

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 the browser’s height or width, the smallest value of both

You may use these units in any CSS property that accepts values in px such as width, height, margin, font-size, etc. They will be recalculated by the browser on window resize or device rotation.

## **Let’s take an overview of its advantages:**

## **Full Height of the page**

Traditionally, we have been using `height:100%` to get the full height of the container to fit on the screen. We can obtain the same result with less code by using `vh`. This helps to scale an image to the height of the user’s screen. [**View demo in codepen**](http://codepen.io/Nirajanbasnet/pen/WpGbYB "**View demo in codepen**"). To see a difference, replace 100vh with 100% in the Codepen demo.

```css
.image-container {
  height: 100vh;
  width: auto;
}
```

## **Keeping an element shorter than the screen**

This technique can be useful if you want to explicitly control the height of an element relative to the viewport size so that it will always remain in view. [**View demo in codepen**](http://codepen.io/Nirajanbasnet/pen/EWgazW "**View demo in codepen**")

## **Scaling Text (Responsive text)**

Using this technique it gives developers great flexibility when adjusting font sizes and they help to scale dynamically with the viewport size. For easy practice place a base font size in the root element, and then use a viewport unit on the root element’s font size, and scale with that.

[**Media queries**](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries "**Media queries**") combine nicely with `vw units` to ensure readability across various screen sizes. [**View demo in codepen**](http://codepen.io/Nirajanbasnet/pen/XMjbdR "**View demo in codepen**"). Try changing a base font size (html) value.

```css
html {
  font-size: 20px;
}

h1 {
  font-size: calc(100% + 5vw); 
}
```

## **Breaking out of the container**

Viewport units make it possible to break outside of a containing element or elements. In scenarios where the CMS makes it difficult or impossible to alter our markup in an HTML template, using viewport units can achieve the desired result regardless of the markup. This technique won’t work in every scenario, but it’s a nice trick in some instances.
[**View demo in codepen**](http://codepen.io/Nirajanbasnet/pen/PpGqbv "**View demo in codepen**")

```css
.container {
  max-width: 1024px;
  margin: 0 auto;
}

.breakout { 
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw; 
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/13cgrjjdwll2yjfhb04s.png)

As you can see, there are solid supports for viewport units across all major web browsers. You may run across a few bugs though. It is always a good practice to check [**caniuse**](http://caniuse.com/#feat=viewport-units "**caniuse**") before implementing a newer technique in your design.

## **Conclusion**

By coming this far I hope you are already loving **Viewport Units**. And personally, I can say viewport units are the perfect fit for a wide range of devices. I suggest you give it a try in your project, explore and enjoy!

I hope you’ve found this blog very helpful. Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

**Keep on Hacking !! Cheers**