AMP admite media queries y media queries de elementos y tiene un potente mecanismo integrado para controlar el diseño de elementos concretos. Con el atributo layout, crear o trabajar con diseños completamente adaptables es mucho más sencillo que si solo utilizaras CSS.

Crea imágenes adaptables fácilmente

Para crear imágenes adaptables, solo tienes que proporcionar valores de width (anchura) y width (altura), asignar el valor responsive al atributo "layout", e indicar con srcset qué recurso de imagen se debe usar en función de cada tamaño de pantalla:

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

El elemento amp-img se adapta automáticamente a la anchura de su elemento contenedor, y su altura se ajusta automáticamente a la proporción determinada por la anchura y la altura especificadas. Puedes probarlo cambiando el tamaño de esta ventana del navegador:

El atributo "layout"

El atributo layout te permite controlar fácilmente cómo deben renderizarse los diferentes elementos en pantalla. Muchos de estos aspectos también pueden controlarse solo con CSS, pero es mucho más difícil y hay que seguir una gran cantidad de pasos. Usa el atributo layout para ahorrarte trabajo.

Valores admitidos del atributo layout

Se pueden asignar los siguientes valores al atributo layout:

Tipo de diseño Anchura
y altura requeridas
Comportamiento
nodisplay No No se muestra el elemento. Este diseño se puede aplicar a todos los elementos de AMP. El componente no ocupa espacio en la pantalla, como si su estilo de visualización tuviera como valor "none". Se supone que el elemento puede mostrarse con una acción del usuario; por ejemplo, amp-lightbox.
fixed El elemento tiene una anchura y una altura fijas y no es adaptable. Las únicas excepciones son los elementos amp-pixel y amp-audio.
responsive El tamaño del elemento depende de la anchura de su elemento contenedor y la altura se modifica automáticamente en función de la proporción determinada por los atributos de anchura y altura. Este diseño funciona muy bien con la mayoría de los elementos de AMP, como amp-img y amp-video. El espacio disponible depende del elemento principal y también se puede personalizar usando el elemento CSS max-width.

Nota: Los elementos con "layout=responsive" no tienen ningún tamaño intrínseco. El tamaño del elemento se determina a partir de su elemento contenedor. Para asegurarte de que se muestre el elemento de AMP, debes indicar la anchura y la altura del elemento contenedor. No especifiques "display:table" en el elemento contenedor, ya que, si lo haces, se impide que el elemento AMP se muestre, lo que lo convierte en invisible.

fixed-height Solo altura El elemento ocupa el espacio disponible, pero la altura no cambia. Este diseño funciona bien en elementos como amp-carousel que implican que el contenido se muestren en posición horizontal. El atributo width no debe estar presente o debe ser auto.
fill No El elemento ocupa 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. Para que un elemento rellene su contenedor principal, comprueba que en el contenedor principal se especifica `position:relative` o `position:absolute`.
container No El elemento permite que sus elementos secundarios definan su tamaño, igual que un div HTML normal. Se supone que el componente no tiene un diseño específico propio, sino que simplemente actúa como contenedor. Sus elementos secundarios se procesan inmediatamente.
flex-item No El elemento y otros elementos dentro del principal ocupan el espacio restante en el contenedor de este último cuando se trata de un contenedor flexible (es decir, display:flex). El tamaño del elemento se determina a partir del elemento principal y de la cantidad de otros elementos incluidos en el principal según el diseño de CSS display:flex.
intrinsic El elemento ocupa el espacio del que dispone y modifica su altura automáticamente según la proporción indicada por los atributos width y height hasta alcanzar su tamaño natural o una restricción de CSS (p. ej., max-width). Los atributos de anchura y altura deben estar presentes. Este diseño funciona muy bien para la mayoría de los elementos de AMP, como amp-img, amp-carousel, etc. El espacio disponible depende del elemento principal y puede personalizarse con max-width en CSS. Este diseño es diferente a responsive porque tiene una altura y una anchura intrínsecas. Esta diferencia se puede apreciar en los elementos flotantes, ya que los que incluyen responsive se representan como 0x0, pero los que usan intrinsic aumentan hasta su tamaño natural o hasta alcanzar alguna restricción de CSS, lo que sea menor.

¿Qué ocurre si la altura y la anchura no están definidas?

En algunos casos, si no se han proporcionado los atributos width o height, el tiempo de ejecución de AMP puede asignarles un valor predeterminado del siguiente modo:

  • amp-pixel: el valor predeterminado de anchura y altura es 0.
  • amp-audio: el navegador infiere la anchura y la altura predeterminadas.

¿Qué sucede si no se ha proporcionado el atributo layout?

Si no se indica el atributo layout, AMP intenta inferir o adivinar el valor adecuado:

Regla Diseño inferido
height está presente y width está ausente o es igual a auto fixed-height
Los atributos width o height están presentes junto con el atributo sizes responsive
Los atributos width y height están presentes fixed
width y height no están presentes container

Usar media queries

Media queries de CSS

Puedes usar @media para controlar el aspecto y el comportamiento del diseño de la página igual que lo harías con cualquier otro sitio web. Cuando la ventana del navegador cambia de tamaño o de orientación, las media queries se vuelven a evaluar y los elementos se ocultan o se muestran en función de los nuevos resultados.

Media queries de elementos

Una función adicional de diseño adaptable disponible en AMP es el atributo media. Este atributo se puede usar en todos los elementos AMP; funciona de forma similar a las media queries de las hojas de estilo globales, pero solo afecta a un elemento específico de una única página.

Por ejemplo, a continuación se muestran dos imágenes con media queries que se excluyen mutuamente.

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

En función de la anchura de la pantalla, se obtendrá y renderizará una de ellas.

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