AMP

Поддерживаемые макеты

AMP поддерживает как медиазапросы, так и элементные запросы, а также предлагает мощный встроенный способ управления атрибутом макетом отдельных элементов. Атрибут layout позволяет создавать полностью адаптивный дизайн и работать с ним гораздо проще, чем при использовании исключительно CSS.

Размещение адаптивных изображений

Чтобы создавать адаптивные изображения, укажите атрибуты width и height, установите атрибуту layout значение responsive и с помощью srcset укажите, какой файл изображения использовать в зависимости от размеров экрана:

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="an image">
</amp-img>

Данный элемент amp-img автоматически растягивается до ширины своего элемента-контейнера, а его высота автоматически настраивается согласно соотношению сторон, определенному по указанной ширине и высоте. Попробуйте его в деле, меняя размер окна браузера:

СОВЕТ. Посмотрите наши сравнительные демонстрации использования amp-img: Live Demos on AMP By Example.

Атрибут layout

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

Поддерживаемые значения атрибута layout:

Ниже представлен полный список допустимых значений атрибута layout.

Тип макета Требуется ли указывать ширину и высоту Поведение
nodisplay Нет Элемент не показывается и не занимает места на экране, аналогично использованию стиля display: none. Этот макет можно применять ко всем элементам AMP. Предполагается, что элемент может стать видимым в случае определенных действий пользователя (например, amp-lightbox).
fixed Да Элемент имеет фиксированную ширину и высоту и не является адаптивным. Исключение составляют только элементы amp-pixel и amp-audio.
responsive Да Ширина элемента устанавливается равной ширине контейнера, а его высота автоматически меняется в соответствии с соотношением сторон, заданным атрибутами width и height. Этот макет поддерживается для большинства элементов AMP, в том числе amp-img и amp-video. Доступное пространство зависит от родительского элемента и может быть настроено с помощью свойства max-width в CSS.

Примечание. Элементы с атрибутом "layout=responsive" не имеют исходного размера. Размер элемента определяется его контейнером. Чтобы гарантировать, что ваш AMP-элемент будет показан, укажите ширину и высоту его контейнера. Не указывайте стиль "display:table" на контейнере, поскольку он переопределяет стиль отображения AMP-элемента, что сделает его невидимым.

fixed-height Только высота Элемент занимает доступное ему пространство, но сохраняет высоту неизменной. Этот макет хорошо подходит для таких элементов, как amp-carousel, в которых контент расположен горизонтально. Атрибут height должен присутствовать. Атрибут width не должен быть указан или должен иметь значение auto.
fill Нет Элемент занимает все доступное ему пространство как по ширине, так и по высоте. Другими словами, макет элемента fill соответствует макету родительского элемента. Чтобы элемент заполнял родительский контейнер, добавьте контейнеру свойство `position:relative` или `position:absolute`.
container Нет Размеры элемента определяют его дочерние элементы, как и в случае HTML-элемента div. Предполагается, что элемент выступает только в качестве контейнера и не имеет определенного собственного макета. Его дочерние элементы отображаются сразу.
flex-item Нет Элемент и другие дочерние элементы его родителя занимают все свободное пространство родительского контейнера, если родитель является flex-контейнером (т. е. использует display:flex). Размер элемента определяется родительским элементом и количеством других элементов, находящихся внутри родителя, в соответствии с правилами компоновки display:flex.
intrinsic Да Элемент занимает доступное ему пространство и меняет высоту автоматически для соответствия соотношению сторон, определенному атрибутами width и height до тех пор, пока не достигнет естественного размера элемента или ограничения CSS (например, max-width). Атрибуты ширины и высоты должны быть указаны. Этот макет очень хорошо подходит для большинства AMP-элементов, включая amp-img, amp-carousel и т. п. Доступное пространство зависит от родительского элемента и также может быть индивидуально настроено при помощи CSS-свойства max-width. Этот макет отличается от макета responsive тем, что имеет стандартную высоту и ширину. Это особенно заметно на примере плавающего элемента, где макет responsive будет иметь размер 0x0, а макет intrinsic расширится до своего естественного размера или ограничения CSS (в зависимости от того, что меньше).

СОВЕТ. Посетите страницу Демонстрация макетов AMP, чтобы увидеть, как различные макеты реагируют на изменение размера экрана.

Что происходит, если ширина и высота не указаны?

Если атрибуты width и height не указаны, то в некоторых случаях среда выполнения AMP может задать им значения по умолчанию согласно следующим правилам:

  • amp-pixel: ширина и высота принимают значение, равное 0.
  • amp-audio: значения width и height по умолчанию определяются параметрами браузера.

Что происходит, если атрибут layout не указан?

Если атрибут layout не указан, AMP попытается угадать подходящее значение:

Правило Предполагаемый макет
Атрибут height указан, но width отсутствует или имеет значение auto fixed-height
Атрибуты width или height указаны вместе с атрибутом sizes responsive
Указаны оба атрибута: width и height fixed
Атрибуты width и height не указаны container

Использование медиазапросов

Медиазапросы CSS

Атрибут @media используется для управления внешним видом и поведением макета страницы. При изменении размера или ориентации окна браузера показ элементов зависит от результатов повторной проверки медиазапросов.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ. Подробнее узнать об управлении макетом с помощью медиазапросов можно в статье Использование медиазапросов CSS для адаптивного дизайна.

Элементные медиазапросы

В AMP доступен еще один атрибут для адаптивного дизайна – media. Он может использоваться для всех элементов AMP и работает аналогично медиазапросам в глобальной таблице стилей, однако влияет только на один элемент на странице.

Ниже приведены коды двух изображений со взаимоисключающими медиазапросами.

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width=466
    height=355
    layout="responsive" >
</amp-img>

Показ того или иного изображения зависит от ширины экрана.

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width=527
    height=193
    layout="responsive" >
</amp-img>