Портфолио, проекты и кейсы Creative

Адаптивная верстка под разные разрешения устройств



Адаптивная верстка под разные разрешения устройств


Срок реализации – 14 дней.


Задачи


  1. Сделать адаптив сайта под разные разрешения устройств
  2. Сократить количество кода

Стэк


React, Next JS, SASS


Решение


В разработке было 3 рабочих сайта с одной кодовой базой. После длительной разработки стало ясно, что в разрешении 4k сайт выглядит слишком мелко, а на планшете слишком громоздко. Также подгоняя под каждое разрешение какие-либо элементы на сайте мы столкнулись с проблемой, что получается крайне много кода.
Поразмыслив, мы придумали достаточно интересное, удобное и легкое в использовании решение. Назвали его — скейлинг (scale). По сути, это обычный миксин написанный на SASS.

Основная цель миксина — адаптив сайта под практически любые разрешения устройства. Мы достигли этого благодаря высчитыванию пропорции от разрешения самого устройства. Scale переводит передаваемые ему значения из PX (пикселей) в VW (относительную единицу измерения), тем самым при любом ресайзе страницы, блоки на сайте пропорционально увеличиваются или уменьшаются.


Одним из главных достоинств нашего миксина — это сокращение кода в 3 раза, ведь вместо прописи 3-х и более медиа блоков, мы лишь импортируем миксин в нужный нам SASS файл стилей и передаем ему нужные нам свойства с 3-мя значениями в PX (пикселях) — мобильные, планшетные и десктопные устройства соответственно.


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

Ян, frontend developer
Frontend ReactJS JavaScript