Viewport Scaling Divs & Responsive Typography
Websites with full viewport features always look pretty cool when done well, with their big bold statements and (normally) minimal look give a great introduction to a site, like Css Wizardry’s Work page, Inks one page site and Irene Langlois Interiors.
They’re many ways to do this, but I’m going to show you the easiest and fastest way to do this with the CSS values vh and vw (because who doesn't like easy and fast?).
Scaling Layouts
So let’s say you have a header that you want to fit the whole viewport of the browser, all that has to be added is a vh value to the height of the header.
header {
width:100%;
height:100vh;
}
/* 1vw = 1% of viewport width */
/* 1vh = 1% of viewport height */You can see how that works in the codepen above, pretty neat huh?
Responsive Typography
You can also change the font size of text using the vw value, like so.
h1 {
font-size:3vw;
}Although I wouldn’t really recommend using this on things such as paragraph text as it could make them really small on mobile screens, but can work really well on headings. Take a look how this works on a demo CSS-Tricks created and you’ll see what I mean.
Hope you guys learned a little from this post, you can do some further reading about viewport typography over at CSS-Tricks.
