Обзор адаптивного макета

Использование медиазапросов для создания адаптивных объявлений
В адаптивном дизайне используются не фиксированные, а гибкие макеты. Теперь дизайнерам не нужно создавать несколько одинаковых объявлений – достаточно создать одно, в котором компоновка элементов будет меняться в зависимости от ориентации и разрешения экрана. Google Web Designer использует медиазапросы CSS3, чтобы применять разные правила стилей к объявлениям разного размера в соответствии со стандартными принципами адаптивного дизайна.

Создание адаптивного документа

Выбирая параметры при создании нового файла, можно установить флажок Адаптивный макет. При этом ширина и высота страницы составит 100 % свободного пространства на экране. Чтобы добиться того же результата в существующем документе, можно установить флажок По размеру области просмотра.

Чтобы сделать элементы документа адаптивными, можно использовать резиновый макет (положение в процентах) и добавить контрольные точки.

Контрольные точки

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

В Google Web Designer можно задавать контрольные точки для размера области просмотра как по горизонтали, так и по вертикали. Так можно адаптировать стиль объявления для любых размеров и ориентаций экранов. Кроме того, можно создавать отдельные горизонтальные и вертикальные версии с собственным набором контрольных точек для каждой ориентации.

Горизонтальные и вертикальные контрольные точки образуют сетку

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

В Google Web Designer легко контролировать горизонтальные и вертикальные диапазоны: они выделены цветами над линейками. Каждому прямоугольнику, в котором пересекаются диапазоны, соответствует отдельный стиль.

В адаптивном макете изменяются только стили, а не содержимое

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

Это ограничение можно обойти, скрыв объекты до того, как понадобится их отобразить. Например, можно добавить изображения, которые вы планируете использовать только в больших версиях объявления, скрыть их в CSS, задав visibility:hidden, а затем изменить стиль на visibility:visible только в больших версиях.

Резиновый макет в адаптивных объявлениях

Другой элемент адаптивного дизайна – резиновый макет. Если перед использованием инструментов выравнивания установить флажок Резиновый макет на панели настроек инструмента выделения, то можно использовать относительное выравнивание: при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и размеров контейнера. При этом можно одновременно задавать размеры элементов в процентах и в пикселях.

Эта информация оказалась полезной?
Как можно улучшить эту статью?