Стоит ли с помощью js вычислять размеры элементов?

Пишу сайт с полностью резиновым интерфейсом. То есть сайт масштабируется в зависимости от ширины экрана, так как размеры практически всех элементов заданы через vw. Мне очень нравится данный подход, так как сайт выглядит практически идентично на всех устройствах (речь идёт о десктопах, ноутбуках и планшетах, с телефонами отдельный разговор). Но есть определённые проблемы, а именно иногда при определённых обстоятельствах появляются некоторые баги, к примеру может быть два блока вроде как с одинаковым размером (например 10vw в ширину), но по факту один блок больше другого на 1px. Я выявил некоторые зависимости для появления этих багов и способы борьбы с ними. К примеру почти во всех случаях помогает хитрое применение backface-visibility. Но как вы знаете это свойство способно вызывать довольно серьёзную нагрузку на устройство, особенно в моём случае, так как интерфейс очень насыщенный и имеет большое количество анимаций. Я стремлюсь сделать интерфейс сайта похожим на интерфейсы нативных приложений. Приходится очень профессионально балансировать на грани красота/качество/производительность и всегда искать наилучшие компромиссы.

Сейчас собираюсь осваивать vue.js и переводить сайт полностью на него. Таким образом появляется множество интересных возможностей. Например я смогу вместо использования единиц vh, vw просчитывать все размеры элементов интерфейса прямо на месте при каждом изменения размеров окна в пикселях. Думаю это избавит меня от множества неприятных проблем и развяжет руки в выборе различных вариантов вёрстки.

Собственно вопрос в том, применяется ли вообще где-то такой подход? Можно ли глянуть на какие-то примеры? Нет ли в данном способе каких-то существенных недостатков? Мб для реализации такого функционала есть какие-то готовые инструменты или подходы?

Не думаю, что у меня возникнут какие-то серьёзные проблемы с реализацией данной задумки, но всё же хотелось бы услышать чужое мнение по данному вопросу.

P.S: Хочу заметить, что сайт является SPA, то есть все размеры будут вычисляться исключительно только при запуске сайта и при изменение размеров окна одновременно с рендерингом самого SPA как такового.

P.S.S: Более того есть идея хранить в local storage результат предыдущего вычисления размеров и ширину экрана, которая была использована для этого. Таким образом, если размер окна не будет изменяться, то этот просчёт вообще произойдёт всего один раз.
  • Вопрос задан
  • 849 просмотров
Пригласить эксперта
Ответы на вопрос 3
sim3x
@sim3x
Стоит ли с помощью js вычислять размеры элементов?
нет. Никогда

Используйте пиксели и медие кваери
Ответ написан
@dinegnet
Я бы не рекомендовал этого делать.

Раньше - из-за зоопарка браузерных движков.
Сейчас из-за зоопарка разрешений и размеров экранов.

Допустимо только если:

Бьетесь бьетесь и никак не можете без этого решить.
Нужно быстро пофиксить.
Нет ресурсов времени/заказчик плохо оплачивае и хочется быстро и дешево сделать видимость

П.С.
И это все еще даже без учета того, что инструменты лучше использовать по назначению.
Ответ написан
В лучшем случае - всё будет просто дико тормозить (особенно в контексте того что вы игру собираетесь делать). Получение размеров из js приводит к принудительному relayout, что всегда плохо.
Вообще трудно представить себе такой интерфейс, который нельзя сверстать используя современные технологии (flex/grid/.../calc/...). Пара скриншотов явно не помешала бы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы