Итак, я получил это приложение в 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
в пикселях, как это делает веб-сайт в гифке.
Кроме того, просто из любопытства, я хотел бы знать, почему и как этот конкретный веб-сайт генерирует новый класс каждые раз размер экрана изменится (я видел это теперь много раз, и мне интересно, что это такое).