Установка ширины <div>при изменении размера окна

Question

Итак, я получил это приложение в Vuejs, которое разделено с помощью css grid на 3 блока: sidebar, configpanel и preview. Я хотел бы установить ширину блока preview div в блоке px в соответствии с текущим размером экрана и при изменении размера экрана

Для пояснения я сделал гифку с веб-сайтом, который довольно очень ТОЧНО то, что я хочу: https://gyazo.com/d667756474e7f4fa18e2d5d64a0dee5a

Как вы можете видеть на гифке, каждый раз, когда размер экрана изменяется, конкретному <div> по какой-то причине назначается новый класс ( не знаю, почему и как) и div width автоматически обновляется новым значением px.

Сначала я думал, что могу сделать что-то вроде этого в created() хуке:

window.addEventListener("resize", () => {
  let preview = window.document.querySelector(".preview");
  preview.style.width = `${preview.offsetWidth}px`;
});

Но это не работает.

У меня есть очень простой пример проекта, настроенный в codesandbox здесь .

В идеале я бы хотел бы знать, как динамически устанавливать width в пикселях, как это делает веб-сайт в гифке.

Кроме того, просто из любопытства, я хотел бы знать, почему и как этот конкретный веб-сайт генерирует новый класс каждые раз размер экрана изменится (я видел это теперь много раз, и мне интересно, что это такое).

Answer 1

Если я правильно понял, что вы имеете в виду, вашим решением может быть приведенный ниже код (добавьте код ниже в свой CSS файл и добавьте в него все классы, которые вы хотите):

@media screen and (max-width: 750px) {
  .selector {
    some code here...
  }
}

Код выше применяет стили, определенные к выбранным элементам, когда ширина экрана устройства составляет 750 пикселей или меньше.