Относительная единица измерения - vw

В этом примере показано действие "vw" - относительной единицы измерения. "vw" - расшифровывается, как "viewport width". "1vw" равен 1% от ширины области просмотра.

HTML

<div class="a">a</div>
<br>
<div class="b">b</div>
<br>
<div class="c">c</div>

CSS

html { background: pink; }
body { background: green; margin: 0; padding: 20px 0; width: 50%; }
div { height: 50px; }

.a { background: yellow; width: 80%; } /* 80% от ширины родителя (body) */
.b { background: magenta; } /* по умолчанию блочные элементы с "width: auto" (не путать с "width: 100%") */
.c { background: red; width: 80vw; } /* 80% от ширины области просмотра */