Jul 26, 2017 · 1 min read
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:
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.
