Дизайн для разных разрешений экрана

Эта функция недоступна для объявлений AMPHTML.

Пользователи просматривают HTML-страницы и объявления на экранах с разными разрешениями и ориентацией. Если размер окна просмотра известен, можно создавать макет специально для него. А если не известен, в Google Web Designer существует несколько способов создавать объявления и страницы, которые адаптируются к разным экранам.

Отдельная страница для каждой ориентации экрана

Если вы планируете показывать объявление на экранах как с горизонтальной, так и с вертикальной ориентацией, самое простое решение – это создать отдельную страницу для каждой из них и связать два варианта с помощью функции "Альтернативная страница". При создании межстраничных объявлений с выключенной функцией Адаптивный макет это происходит автоматически. Это вариант отлично работает, если вы создаете объявление для определенного разрешения экрана.

Важно! Чтобы изменить неадаптивный макет с отдельными страницами для каждой ориентации на адаптивный, удалите Альтернативную страницу и создайте отдельные правила обработки мультимедиа для вертикальной и горизонтальной ориентации.

Адаптивный макет

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

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

Если вы создаете объявление с двойной ориентацией и адаптивным макетом, создается одна страница, а ориентация мобильного устройства определяется с помощью правил обработки мультимедиа.

Работа с адаптивными объявлениями

Резиновый макет

В адаптивных объявлениях можно использовать инструмент "Резиновый макет", чтобы пропорционально выравнивать элементы на странице при изменении области просмотра. Например, элемент с расстоянием 30% слева будет сохранять эти пропорции независимо от размера области просмотра.

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