Responsive CSS units vh, vw, vmin, and vmax

How to use vh vm vmin vmax for responsive and adaptive web design.

The Issue:

When making a responsive websites you want the sizes of elements to be directly correlated with the size of the screen. The common solution now is media queries but there is a very simple solution to some common issues likes full screen pages, adaptive images, or typography.


Why Not Use Percetages:

Another solution to this problem is using percentages, but they have limitations

- It does not take into consideration margins

- It's a pain in the ass to use for the height of a viewport or window

- Can't use it for text sizes;


The solution:

These units represent the percentages of the viewport, or what they take what is viewable in from your browser and makes translates that into percentages;

- vw (viewport width) - the width of the viewport as percents.

- vh (viewport height) - the height of the viewport as percents.

- vmin (viewport minimum) - the lesser of the vh and vw.

- vmax (viewport maximum) - the heigher of the vh and vw.


How to Use:

Just like you would use px but instead use vh, vw, vmin, vmax. It will resize as you resize the browser.

if you want to make a page full screen:

 height : 100vh;

and thats it.




A Working Example: