Удобное масштабирование сложных интерфейсов под любые экраны

Один из наших клиентов обратился к нам для создания MVP медицинского сервиса. Дизайн приложения разрабатывался другим подрядчиком, прошёл утверждение, и на момент передачи макетов в разработку в Evrone не было ни времени, ни возможности сделать его адаптивным. 

При этом условии, разработка кросс-платформенного приложения, которое хорошо выглядит на всех основных устройствах, стала настоящим вызовом.

Для решения этой задачи Chief Front-end Evrone Дмитрий Карпунин разработал плагин postcss-px-to-viewport, который позволяет настраивать масштаб интерфейса под нужные разрешения экранов.

Что делает postcss-px-to-viewport

Плагин превращает величины в пикселях в viewport-единицы (vw, vh, vmin, vmax). Легко один раз настроить поведение плагина и без использования дополнительных функций писать чистый исходный код, либо применять к уже написанному.

Это экономит время, делает код аккуратнее, а дизайн масштабируется с минимумом возможных искажений, которые могут возникнуть, если конвертировать в rem (размер шрифта установленный для корневого элемента html).

Пример работы

Если в вашем проекте используется фиксированная ширина, этот скрипт сконвертирует пиксели в viewport-единицы:

До использования плагина:

.class {
  margin: -10px .5vh;
  padding: 5vmin 9.5px 1px;
  border: 3px solid black;
  border-bottom-width: 1px;
  font-size: 14px;
  line-height: 20px;
}

.class2 {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

После использования плагина:

.class {
  margin: -3.125vw .5vh;
  padding: 5vmin 2.96875vw 1px;
  border: 0.9375vw solid black;
  border-bottom-width: 1px;
  font-size: 4.375vw;
  line-height: 6.25vw;
}

.class2 {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 6.25vw;
  line-height: 9.375vw;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

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

Как начать использовать плагин?

Инструкция по установке и имеющимся параметрам доступна в репозитории.

Когда полезна адаптация дизайна для  кросс-платформенных приложений?

Postcss-px-to-viewport стал довольно популярным. Сейчас он используется в репозиториях 4600 проектов, преимущественно в Китае. Open-source сообщество тепло относится к действительно полезным инструментам: например, один из китайских разработчиков помог с переводом технической документации, чтобы другие тоже могли пользоваться плагином. Справился он всего за 2 дня.

Такая популярность postcss-px-to-viewport в Китае объясняется тем, что там производят основную массу Android-устройств. Существуют модели смартфонов и планшетов для внутреннего рынка, о которых мы и не подозреваем. Проблема разных экранов заставляет разработчиков искать быстрые и эффективные способы адаптировать дизайн кросс-платформенных приложений и веб-сервисов.

Также плагин будет полезен, когда нет возможности создать адаптивный дизайн. Например, для запуска и проверки гипотезы достаточно минимально жизнеспособного продукта (MVP), поэтому ресурсы ограничены. Или разработку и дизайн делают разные подрядчики, дизайн уже готов и доделывать его на каком-то этапе уже нельзя. Ещё бывает, что интерфейс в принципе сложный и его никак не адаптировать вручную под все экраны в мире: например в казуальных играх, интерактивных книгах.

Evrone активно поддерживает open-source. Если вы столкнулись с какой-то проблемой в разработке и не можете найти готовое решение — мы можем помочь разработать плагин или сервис, который решит вашу проблему и, возможно, поможет тысячам других разработчиков.