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 width and height, setting layout to responsive, and indicating with srcset 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>

This 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:

TIP – See our side-by-side live demos of amp-img: Live Demos on AMP By Example.

The layout attribute

The 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 `layout` attribute

The following values can be used in the layout attribute:

Layout type	Width/ height required	Behavior
`nodisplay`	No	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, `amp-lightbox`.
`fixed`	Yes	Element has a fixed width and height with no responsiveness supported. The only exceptions are `amp-pixel` and `amp-audio` elements.
`responsive`	Yes	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-img`, `amp-video`. Available space depends on the parent element and can also be customized using `max-width` CSS. Note: Elements with `"layout=responsive"` have no intrinsic size. The size of the element is determined from its container element. To ensure your AMP element displays, you must specify a width and height for the containing element. Do not specify `"display:table"` on the containing element as this overrides the display of the AMP element, rendering the AMP element invisible.
`fixed-height`	Height only	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 `auto`.
`fill`	No	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`.
`container`	No	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.
`flex-item`	No	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.
`intrinsic`	Yes	The element takes the space available to it and resizes its height automatically to the aspect ratio given by the `width` and `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-img`, `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.

TIP – Visit the Demonstrating AMP layouts page to see how the various layouts respond to screen resizing.

What if width and height are undefined?

In a few cases if width or 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.

What if the `layout` attribute isn’t specified?

If the layout attribute isn't specified, AMP tries to infer or guess the appropriate value:

Rule	Inferred layout
`height` is present and `width` is absent or equals to `auto`	`fixed-height`
`width` or `height` attributes are present along with the `sizes` attribute	`responsive`
Both `width` and `height` attributes are present	`fixed`
`width` and `height` are not present	`container`

Using media queries

CSS media queries

Use @media 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.

READ ON – Learn more about controlling layout by applying media queries in Use CSS media queries for responsiveness.

Element media queries

One extra feature for responsive design available in AMP is the media attribute. 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>

Written by @Meggin
with contributions from @pbakaus