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="an image">
</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:

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.
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.
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.

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
width or 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.

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=466
    height=355
    layout="responsive">
</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=527
    height=193
    layout="responsive">
</amp-img>