Diseño y media queries
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:
Puedes ver demostraciones comparativas en directo de amp-img en AMP By Example.
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 | Sí | 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 | Sí | 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 |
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 | Sí | 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. |
Para ver cómo responden los diferentes diseños al redimensionamiento de la pantalla, visita la página con demostraciones de diseños de AMP.
¿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.
Obtén más información sobre cómo controlar el diseño con media queries en el artículo Usa las media queries en CSS para una mayor receptividad.
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="527" 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="466" height="193" layout="responsive"> </amp-img>