Cómo hacer que un sitio web responda a AMP

El estilo y el diseño en las páginas HTML de AMP son muy similares a las páginas HTML normales; en ambos casos, usará CSS.

Sin embargo, AMP limita el uso de CSS por razones de rendimiento y usabilidad, al tiempo que amplía las capacidades de diseño receptivo con características como marcadores de posición y retrocesos, dirección de arte avanzada a través de srcset y el atributo de distribución para un mejor control sobre cómo se muestran sus elementos.

Es muy fácil hacer que los elementos respondan en AMP. Simplemente ponga layout="responsive" en ellos. Para obtener más información sobre el diseño receptivo en AMP, diríjase a Crear páginas AMP receptivas

Agregar estilos a una página

  • Agregue todo el CSS dentro de una etiqueta en el encabezado del documento. Por ejemplo:
  • / * cualquier estilo personalizado vaya aquí. * /
    cuerpo {
    color de fondo: amarillo;
    }
    amp-img {
    borde: 5px negro sólido;
    }

    amp-img.red-placeholder {
    color de fondo: rojo;
    }

  • NOTA: Asegúrese de que solo haya una etiqueta en su página, ya que no se permite más de una en AMP.