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/