Using viewport units to scale fixed layouts
Sebastian Eberlein

An interesting technique. It seems like it would really shine when used for specific elements on a page that required a very strict layout (heroes, like the one from the Netflix example), while still using more traditional techniques for the rest of the page layout.

Defining positions and sizing of content on a per-element basis with percent units rather that vw would allow similar functionality and semantics without relying on calc(). Something like this:

$base-scaling: 0.015;
@function elw($size) {
@return 100% * $base-scaling * $size;
h1 {
font-size: elw(2);
margin-bottom: elw(0.75);

This would still allow fixed sizing to be defined relative to a given element, without potentially less well-supported CSS features (calc(), variables, or the vw and vh units themselves).

Any thoughts on this approach?

Like what you read? Give Myra Guerrier a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.