My first idea was similar: Use viewport units only for font-sizes and percentage values for everything else. But there were a few drawbacks:
- If you want to use flexbox, you can’t use percentages for paddings or margins on flex items.
- 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:
padding: 0 $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.