Layout & media queries
AMP supports both media queries & element queries, plus comes with a powerful, built-in way to control the layout of individual elements. The
layout attribute makes working with and creating fully responsive design much easier than if you'd use CSS alone.
Responsive images, made easy
Create responsive images by specifying the
height, setting layout to
and indicating with
which image asset to use based on varying screen sizes:
<amp-img src="/img/narrow.jpg" srcset="/img/wide.jpg 640w, /img/narrow.jpg 320w" width="1698" height="2911" layout="responsive" alt="..."> </amp-img>
amp-img element automatically fits the width
of its container element,
and its height is automatically set to the aspect ratio
determined by the given width and height. Try it out by resizing this browser window:
layout attribute gives you easy, per-element control over how your element
should render on screen. Many of these things are possible with pure CSS – but
they're much harder, and require a myriad of hacks. Use the
layout attribute instead.
Supported values for the
The following values can be used in the
|Element not displayed. This layout can be applied to every AMP element. The component takes up zero space on the screen as if its display style was none. It’s assumed that the element can display itself on user action, for example,
|Element has a fixed width and height with no responsiveness supported. The only exceptions are
|Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes. This layout works very well for most of AMP elements, including
amp-video. Available space depends on the parent element and can also be customized using
Note: Elements with
|Element takes the space available to it but keeps the height unchanged. This layout works well for elements such as
amp-carousel that involves content positioned horizontally. The
width attribute must not be present or must be equal to
|Element takes the space available to it, both width and height. In other words, the layout of a fill element matches its parent. For an element to fill its parent container, ensure the parent container specifies `position:relative` or `position:absolute`.
|Element lets its children define its size, much like a normal HTML
div. The component is assumed to not have specific layout itself but only act as a container. Its children are rendered immediately.
|Element and other elements in its parent take the parent container's remaining space when the parent is a flexible container (i.e.,
display:flex). The element size is determined by the parent element and the number of other elements inside the parent according to the
display:flex CSS layout.
|The element takes the space available to it and resizes its height automatically to the aspect ratio given by the
height attributes until it reaches the element's natural size or reaches a CSS constraint (e.g., max-width). The width and height attributes must be present. This layout works very well for most AMP elements, including
amp-carousel, etc. The available space depends on the parent element and can also be customized using
max-width CSS. This layout differs from
responsive by having an intrinsic height and width. This is most apparent inside a floated element where a
responsive layout will render 0x0 and an
intrinsic layout will inflate to the smaller of its natural size or any CSS constraint.
In a few cases if
height are not specified,
the AMP runtime can default these values as the following:
amp-pixel: Both width and height are defaulted to 0.
amp-audio: The default width and height are inferred from browser.
layout attribute isn't specified, AMP tries to infer or guess
the appropriate value:
height is present and
width is absent or equals to
height attributes are present along with the
height attributes are present
height are not present
Using media queries
CSS media queries
to control how the page layout looks and behaves, as you would do on any other website.
When the browser window changes size or orientation,
the media queries are re-evaluated and elements are hidden and shown
based on the new results.
One extra feature for responsive design available in AMP is the
This attribute can be used on every AMP element;
it works similar to media queries in your global stylesheet,
but only impacts the specific element on a single page.
For example, here we have 2 images with mutually exclusive media queries.
<amp-img media="(min-width: 650px)" src="wide.jpg" width="527" height="355" layout="responsive" alt="..."> </amp-img>
Depending on the screen width, one or the other will be fetched and rendered.
<amp-img media="(max-width: 649px)" src="narrow.jpg" width="466" height="193" layout="responsive" alt="..."> </amp-img>