What Problem is This Solving?
I was recently working on a project for a client that required headlines to scale in response to the user’s screen size for stylistic purposes. I knew that my usual method of setting units in rem wouldn’t work as it is relative to the font-size of the root element html and not the user’s screen size.
After searching the internet I found the solution I was looking for in the form of something called Viewport-Percentage Lengths.
I eventually came to an MDN article discussing data type which delved into relative sizes (rem and em), and further down the page I noticed something called Viewport-percentage lengths. This is exactly what I was looking for, I just didn’t know what it was called!
How it Works
It is actually very simple. One unit is equal to 1% of either the viewport’s width vw or height vh. You can also set a min and max with vmin and vmax.
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
If the viewport is 100mm wide then 5vw == 5mm.
In the case of font-size: 5vw; a single letter takes this size, so in this example the em box is 5% of the screen width wide (5mm wide)
vmin and vmax are set like this:
width: 100vmin; // Container width
background-color: #ff5442; // Dapper red
In the above example the section container fills up 100% of the screen width only if the screen is in a portrait view (taller than it is wide).
Here is an example of the font size scaling with the screen size with no breakpoints set. (I apologize but medium doesn’t seem to allow me to embed the demos)
Here is a fun example I made showing a document page with a parisian-blue background that has a section container fill 90vm (90%) of the viewport’s width and height with a simple orientation media query.
Not Just for Font Size
These units can be used for anything, not just font sizes. Instead of setting a container’s width: 90%; you could set it to width: 90vw; like the above example.
Usage Across the Web
This is supported by most of the major browsers but not all of them. Internet Explorer doesn’t support vmax and it has some issues on mobile. If you are successfully using this method in any of your projects let me know your thoughts.