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
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>
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
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
|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, |
|Yes||Element has a fixed width and height with no responsiveness supported. The only exceptions are |
|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 |
Note: Elements with
|Height only||Element takes the space available to it but keeps the height unchanged. This layout works well for elements such as |
|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`.|
|No||Element lets its children define its size, much like a normal HTML |
|No||Element and other elements in its parent take the parent container's remaining space when the parent is a flexible container (i.e., |
|Yes||The element takes the space available to it and resizes its height automatically to the aspect ratio given by the |
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
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?
layout attribute isn't specified, AMP tries to infer or guess the appropriate value:
Using media queries
CSS media queries
@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"> </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"> </amp-img>