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:
