Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

amp-layout

Description

The amp-layout` component allows you to apply aspect-ratio based responsive layouts to any element. The `amp-layout` component works similarly to the layout.

Descripción Elemento contenedor genérico y multipropósito que aporta diseños de AMP de gran utilidad
Diseños admitidos container, fill, fixed, fixed-height, flex-item, intrinsic y responsive

Descripción general

El componente amp-layout permite aplicar a cualquier elemento diseños adaptables basados en la relación de aspecto. Funciona de forma similar al atributo layout en los componentes AMP disponibles, pero admite cualquier etiqueta HTML como elemento secundario. Todos los demás diseños admitidos funcionan con amp-layout (por ejemplo, fixed-height, fixed, etc.).

Ejemplo

En este ejemplo se utiliza amp-layout para crear un contenedor adaptable alrededor de un círculo dibujado mediante SVG insertado.

<amp-layout layout="responsive" width="1" height="1">
  <svg viewBox="0 0 100 100">
    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
      Lo sentimos, pero tu navegador no es compatible con SVG insertado.
    </svg>
  </amp-layout>

Atributos

Este elemento incluye atributos comunes que se aplican a los componentes de AMP.

Validación

Consulta las reglas de amp-layout en la especificación de la herramienta de validación de AMP.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow
¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub