vw единиц:

Вы можете использовать блоки vw для ширины и высоты элемента. Это позволяет сохранить пропорции элемента в зависимости от ширины окна просмотра.

vw: 1 / 100th ширины окна просмотра. [ MDN ]

В качестве альтернативы вы также можете использовать vh для высоты видового экрана или даже vmin / vmax для использования меньшего / большего размера размеров просмотра (обсуждение здесь ).

Пример: соотношение сторон 1: 1

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

Для других соотношений сторон вы можете использовать следующую таблицу для вычисления значения высоты в соответствии с шириной элемента:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

Пример: 4x4 сетка квадратных divs

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

Вот скрипка с этой демонстрацией , и вот

---

Поддержка браузера для модулей vh / vw - это IE9 + см. canIuse для получения дополнительной информации