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:

#fullscreen-div{
 height : 100vh;
}

and thats it.

typography?

h1{
   font-size:10vw;
}

A Working Example:

http://jsfiddle.net/ehaliseda/sdeho3k0/