Поддерживаемые макеты
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.Примечание. Элементы с атрибутом |
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 (в зависимости от того, что меньше). |
Что происходит, если ширина и высота не указаны?
Если атрибуты 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 используется для управления внешним видом и поведением макета страницы. При изменении размера или ориентации окна браузера показ элементов зависит от результатов повторной проверки медиазапросов.
Элементные медиазапросы
В 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>