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: