В объявлениях AMPHTML адаптивные функции не поддерживаются. Для видеорекламы, анимированных GIF-файлов и графических объявлений вы можете настроить макет с разными размерами.
В адаптивном дизайне используются гибкие макеты. Это позволяет дизайнерам не создавать несколько одинаковых макетов – достаточно создать один, в котором компоновка элементов будет меняться в зависимости от ориентации экрана и ширины окна. Для адаптивного дизайна в Google Web Designer предусмотрены различные инструменты.
У вашего документа должен быть как минимум адаптивный размер страниц. Вы также можете создать резиновый макет, задав размер объектов и их позицию относительно друг друга в процентах. Чтобы настроить каждый элемент для разных размеров области просмотра, используйте правила обработки мультимедиа.
Графические объявления не могут быть адаптивными, но вы можете использовать для них адаптивный рабочий процесс в макете с разными размерами, чтобы экспортировать изображения разного размера из одного документа.
Размеры адаптивных страниц
Как сделать адаптивным весь документ
Ширина и высота страницы адаптивного документа должны быть заданы на уровне 100 %, чтобы документ занимал все доступное место на экране.
-
Существующий документ. На панели Адаптивные установите флажок Адаптивный макет.
-
Новый документ. Выбирая параметры при создании нового файла, установите флажок Адаптивный макет (эта функция доступна не для всех типов файлов).
Чтобы сделать адаптивными элементы документа, можно использовать резиновый макет и правила обработки мультимедиа.
Резиновый макет
Положение и размер в процентах
Использование процентов для установки размеров элементов
Размер и положение элементов страницы можно задавать не только в пикселях, но и в процентах. Процентное соотношение позволяет выравнивать размеры и положение элементов относительно родительского контейнера, даже если его размеры меняются.
Положение в процентах можно задать в инструментах выравнивания и распределения с помощью функции Резиновый макет.
Правила обработки мультимедиа
Переопределение атрибутов и стилей CSS для разных размеров и ориентации области просмотра
Правила обработки мультимедиа позволяют определять размер и ориентацию областей просмотра и применять соответствующие стили и атрибуты. Например, на экране телефона содержимое может отображаться в одном столбце, а на планшете – в двух. Эти изменения (переопределения) применяются в зависимости от размеров и диапазонов размеров.
Выбрать набор правил можно на панели "Адаптивные".
- Правила по умолчанию. Чтобы внести изменения (например, добавить или удалить объекты, компоненты и события) в набор стилей по умолчанию или применить их ко всем размерам области просмотра, выберите Изменить основные свойства документа.
- Правила обработки мультимедиа. Выберите определенный размер или диапазон размеров, чтобы переопределить стили по умолчанию для его области просмотра.
Если выбрано правило обработки мультимедиа, вы сможете задать стили для определенного размера или диапазона, например изменить положение, размер, источник, видимость и анимацию элемента. Google Web Designer также позволяет переопределять свойства компонентов, текстовое содержимое и параметры его масштабирования.
Подробнее о правилах обработки мультимедиа и переопределениях стиля…
