An interesting technique.
Myra Guerrier
1

My first idea was similar: Use viewport units only for font-sizes and percentage values for everything else. But there were a few drawbacks:

  1. If you want to use flexbox, you can’t use percentages for paddings or margins on flex items.
  2. Let’s say you need a consistent value (i.e. an SCSS variable) in your layout, for example for horizontal paddings. The problem is, that percentage values are always relative to another quantity, for example a length. To see what this means, let’s take a look at an example:

HTML:

<article>
<h1>Hello World</h1>
</article>

SCSS:

$hrz-padding: 5%;
article{
padding: 0 $hrz-padding;
}
h1{
padding-left: $hrz-padding;
}

You might think that the article and the h1 have the same padding-left, but that’s not the case.

Let’s say the viewport width is 1000px: The article is 1000px wide and has 50px horizontal padding. Since the h1 is nested in the article, it is only 900px wide, thus its padding-left is only 45px.

One clap, two clap, three clap, forty?

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