AMP soporta ambos, consultas de medios & consultas de elementos, además viene con una potente e integrada forma de controlar el diseño (es decir el layout) de los elementos individuales. El atributo layout hace que trabajar y crear un diseño totalmente adaptable (responsive) sea mucho más fácil que si utilizas solamente CSS.

Imágenes adaptables, de forma fácil

Crear imágenes adaptables (responsive) bastará con especificar el width y height, configurar el layout a responsive, e indicar con srcset cuál imagen se usará en la variedad de pantallas:

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

Este elemento amp-img se ajustará automáticamente al ancho de su elemento contenedor, y su altura también se ajustará automáticamente en relación a su aspecto determinado por los valores de ancho y alto que se dieron.

Pruebalo ahora mismo, cambiando el tamaño de la ventana del navegador con ésta imagen:

El atributo layout

El atributo layout te brinda un control sencillo por elemento, sobre cómo tu elemento se debe mostrar en pantalla. Muchas de estas cosas son posibles con CSS puro – pero son mucho más difíciles, y requieren una gran cantidad de hacks. En vez de eso, usa el atributo layout.

Valores soportados para el atributo layout

Los siguientes valores pueden ser soportados por el atributo layout:

Layout type Width/
height requerido
Comportamiento
nodisplay No El elemento no se muestra. Este diseño se puede aplicar a todos los elementos de AMP. El componente no ocupa espacio en la pantalla como si no hubiese estilo de visualización. Se supone que el elemento puede mostrarse con una acción del usuario, por ejemplo, amp-lightbox.
fixed Si El elemento tiene una anchura y una altura fijas y no es compatible con la adaptabilidad. Las únicas excepciones son los elementos amp-pixel and amp-audio.
responsive Si El tamaño del elemento depende de la anchura de su elemento contenedor y la altura se modifica de tamaño automáticamente en función de la relación de aspecto determinada por los atributos de anchura y altura. Este diseño funciona muy bien para la mayoría de los elementos de AMP, incluidos amp-img y amp-video. El espacio disponible depende del elemento principal y también se puede personalizar usando el elemento CSS max-width.
fixed-height Solo height El elemento toma el espacio disponible, pero no modifica la altura. Este diseño funciona bien para elementos como amp-carousel , que implica contenido en posición horizontal. El atributo width no debe estar presente o bien debe tener el valor auto.
fill No El elemento toma el espacio disponible, tanto en anchura como en altura. En otras palabras, el diseño de un elemento de relleno coincide con el elemento principal.
container No El elemento permite que los elementos secundarios definan su tamaño, igual que un HTML div normal. Se supone que el componente no tiene un diseño específico propio, sino que simplemente actúa como contenedor. Los elementos secundarios se procesan inmediatamente.
flex-item No El elemento y otros elementos de su padre toman el espacio restante del contenedor principal cuando el padre es un contenedor flexible (por ej., display:flex). El tamaño del elemento está determinado por el elemento padre y el número de otros elementos dentro del elemento principal según CSS: display:flex.

¿Qué ocurre si width y height no están definidos?

En algunos casos si width o height no son especificados, la rutina AMP puede ofrecer estos valores de forma predeterminada del siguiente modo:

  • amp-pixel: tanto la anchura como la altura tienen 0 como valor predeterminado.
  • amp-audio: el navegador infiere la anchura y la altura predeterminadas.

¿Qué ocurre si el atributo layout no está definido?

Si el atributo layout no está especificado, AMP trata de inferir o adivinar el valor apropiado:

Regla Layout inferido
height está presente y width no está definido o su valor es auto fixed-height
Los atributos width o height están presentes junto al atributo sizes responsive
Los atributos width o height están presentes fixed
Los atributos width y height no están presentes container

Uso de consultas de medios

Consultas de medios CSS

Use @media para controlar cómo se ve y se comporta el diseño de la página, como lo haría en cualquier otro sitio web. Cuando la ventana del navegador cambia de tamaño u orientación, las consultas de medios se reevaluan y los elementos se ocultan y se muestran basado en los nuevos resultados.

Elemento consultas de medios

Una característica adicional para el diseño receptivo disponible en AMP es el atributo media. Este atributo se puede utilizar en cada elemento AMP; funciona de forma similar a las consultas de medios en su hoja de estilo global, pero sólo afecta al elemento específico en una sola página.

Por ejemplo, aquí tenemos dos imágenes con consultas de medios mutuamente exclusivas.

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width=466
    height=355
    layout="responsive">
</amp-img>

Dependiendo del ancho de la pantalla, uno u otro será buscado y renderizado.

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width=527
    height=193
    layout="responsive">
</amp-img>