amp-html - 在现有响应式网站上实现 AMP

Question

我是 AMP 的新手。我有一个响应式网站，我需要在其主页上实现 AMP。是否可以使其与 AMP 兼容而不影响桌面 View ？或者我需要为 AMP 重写单独的代码？

Answer 1

您可以使用@media来区分移动和桌面 View 。

来自Create responsive AMP pages :

In responsive design, you can use CSS @media queries to tailor the styling of your web page for various screen dimensions without having to alter the content of the page. In AMP, you can continue to use those same CSS @media queries. Additionally, for finer control over an AMP element, you can specify the media attribute on the element. This is particularly useful when you need to either show or hide an element based on a media query. See the Changing the art direction of an image section for an example that uses the media attribute.

对于 JavaScript，

<script type="text/javascript">

if (screen.width < 980) { 

    document.write('<script type="text/javascript" src="amp mobile.js"></script>');  
 } else{
     import other js
 }

</script>