Новая адаптивка - единицы вьюпорта

Автор: Ash Durham    Источник: medium.com
21.08.2017
740
0
img

Я являюсь ярым защитником адаптивной разработки. То, что дни верстки под конкретную ширину или устройство давно прошли – уже не новость – вокруг сотни устройств разных размеров. Нужно учитывать все размеры, и быть уверенным, что страница везде выглядит идеально. В большинстве случаев этого можно добиться, используя media querie и проценты, однако, недавно я понял, что для работы над более сложным дизайном, мне нужно еще больше контроля. И, к счастью, решение есть – единицы вьюпорта.

Единицы вьюпорта

Вообще-то я всегда думал, что единицы вьюпорта – это то же самое, что и проценты, но относящиеся не к родственному контейнеру элемента, а к вьюпорту. Я так думал, потому что 1vw или 1vh - это 1/100 ширины или высоты вьюпорта. Однако, эти единицы более многогранны – задав свойству font-size процентное значение вы не получите того же эффекта, что с единицами вьюпорта. Именно тут они показывают всю свою силу, доказывая свою важность в адаптивной разработке.

Применение

Быстрый поиск в google по фразе “CSS viewport” выдает множество полезных примеров, например, на Web Design Weekly, SitePoint и CSS Tricks. В каждом из них дается исчерпывающее объяснение того, как единицы вьюпорта могут помочь с версткой, центрированием элементов и размером шрифта – везде объясняется гораздо лучше, чем я когда-либо смог бы.

Однако, этот пост не один из многих.

Я хочу объяснить, как единицы вьюпорта могут помочь в случае, когда нужно масштабировать много элементов, и делать расчёты на основе ширины в пикселях.

Вариант использования

Да, это не типично – делать расчёты на основе ширины в пикселях. Давайте рассмотрим следующий сценарий: у вас есть большая картинка, изображающая макет, который легко можно воссоздать с помощью HTML и CSS, но вы хотите, чтобы все это пропорционально масштабировалось. Макет содержит текст, иконки и, возможно, даже анимированные элементы.

Проценты могут помочь только частично, вы не сможете масштабировать текст с помощью процентов так, чтобы в какой-то момент не потерять пропорцию. Можно регулировать размер шрифта с помощью 101 медиа запроса, но вскоре все очень запутается. Может применить в этом сценарии SVG, ведь основная цель в том, чтобы добиться супер четкой графики и быстрой загрузки страницы, правильно? Но, увы, меняя свой размер по ширине, SVG сохранит высоту и потеряет пропорцию, оставив вам “padding” над и под масштабируемой графикой. Что же можно сделать, чтобы сохранить масштаб и не использовать при этом один большой JPG?

Расчёты

Итак, я упоминал про расчёты:

(Исходное значение * 100) / ширина медиа запроса

Эта формула даст вам значения для единиц вьюпорта, необходимые для масштабирования элементов в момент начала работы медиа запроса. Давайте используем эту формулу на примере ниже:

Когда ширина вьюпорта становится меньше 910 пикселей, все элементы внутри темно-серого блока пропорционально уменьшаются. Это очень простой пример того, сколько возможностей добавляют единицы вьюпорта для адаптивной разработки.

Следующая проблема – расчёты. Вручную делать расчеты для каждого значения, которое нужно контролировать, довольно затратно по времени… однако, есть надежда!

Препроцессоры спешат на помощь

Можно создать простой миксин на LESS или SASS, который будет делать это за нас. Сначала давайте посмотрим, как это будет выглядеть с миксином LESS:

.viewport(@property, @initialsize, @maxwidth, @unit:vw) {
    @{property}: unit((@initialsize*100)/@maxwidth, @unit);
}

А теперь с миксином SASS:

=viewport($property, $initialsize, $maxwidth, $unit:vw)
    #{$property}: ($initialsize*100)/$maxwidth#{$unit}

Как видите, использование препроцессора и миксина, значительно облегчает работу. Возможности применения этого метода бесконечны и ограничиваются только вашей фантазией.

Уже на протяжении долгого времени везде, где это возможно, вместо простого экспорта JPG я воссоздаю его с помощью HTML и CSS. Основные причины:

  • Не нужно создавать еще 2 изображения (или 3, если вы работаете с мониторами с разрешением @3x), или работать с изображением, которое в 2 раза больше, чтобы обеспечить четкость на ретина экранах.
  • Уменьшить кол-во запросов к серверу, или в случае с использованием SVG, уменьшить размер запросов.
  • Возможность добавлять интерактивность или анимацию.

ПОХОЖИЕ СТАТЬИ: