Адаптивная верстка под разные разрешения устройств
Срок реализации – 14 дней.
Задачи
- Сделать адаптив сайта под разные разрешения устройств
- Сократить количество кода
Стэк
React, Next JS, SASS
Решение
В разработке было 3 рабочих сайта с одной кодовой базой. После длительной разработки стало ясно, что в разрешении 4k сайт выглядит слишком мелко, а на планшете слишком громоздко. Также подгоняя под каждое разрешение какие-либо элементы на сайте мы столкнулись с проблемой, что получается крайне много кода.
Поразмыслив, мы придумали достаточно интересное, удобное и легкое в использовании решение. Назвали его — скейлинг (scale). По сути, это обычный миксин написанный на SASS.
Основная цель миксина — адаптив сайта под практически любые разрешения устройства. Мы достигли этого благодаря высчитыванию пропорции от разрешения самого устройства. Scale переводит передаваемые ему значения из PX (пикселей) в VW (относительную единицу измерения), тем самым при любом ресайзе страницы, блоки на сайте пропорционально увеличиваются или уменьшаются.
Одним из главных достоинств нашего миксина — это сокращение кода в 3 раза, ведь вместо прописи 3-х и более медиа блоков, мы лишь импортируем миксин в нужный нам SASS файл стилей и передаем ему нужные нам свойства с 3-мя значениями в PX (пикселях) — мобильные, планшетные и десктопные устройства соответственно.
Мы достаточно хорошо изучили SASS, его возможности, функции и методы и получили огромный опыт работы с ним. Наше решение позволяет в разы сокращать код и отображать сайт корректно при любом масштабировании.
Ян, frontend developer