Using viewport units to scale fixed layouts
Sebastian Eberlein
1934

I love this! I’ve been experimenting with this exact strategy for a little while. Despite some of the current quirks with vw units, the technique enables you to create proportional, edge-to-edge layouts that would otherwise be impossible with traditional liquid layout. Here are a handful of things I’ve found:

For legibility, you have to pay attention to your root font size relative to the breakpoint you’re at, and ensure that text doesn’t get much smaller than 16px. It helps to design on an 8-pt grid to keep everything sane. (Perhaps this is why some people are saying not to use vw for font-size, because it’s easy to get wrong?)

IE handles rounding with less precision than other browsers. So you can run into issues with sub-integer values in your vw*rem calculations. It’s more pronounced at larger screen sizes, or with tiny measurements like thin lines.

Calculating rem measurements in your head gets old fast, so it helps to use some pre-processor tricks. For example, if you designed an element to be 200px wide on a 375px wide screen, you could set the width of the element to be 200*$phone-pixels. (Using whatever variable/function method you prefer.) Let sass handle the math.

I started a little mixin library to streamline all of this, but I’ve let it collect dust for a while — would love to boot it back up if you’re interested.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.