使用AMP做RWD

RWD 在現如今的網站，可以說是必備設定了。這兒要注意一點：平日裡我們是用 css 在做 RWD 的設定，但在 AMP 的世界裡，並不是這樣的。該怎麼做呢?

請在 <amp-ooxx> 元件裡加上layout="responsive" & media=(min-width: 768px) 這樣的 attribute；下面我們用<amp-img>來舉例：

<!-- 頁寬至少要768px -->
<amp-img
    media="(min-width: 768px)"
    src="mobile.jpg"
    width=300
    height=150
    layout="responsive">
</amp-img>
<!-- 頁寬最多767px -->
<amp-img
    media="(max-width: 767px)"
    src="desktop.jpg"
    width=600
    height=200
    layout="responsive">
</amp-img>

那麼~如果我想設定一個元件只會在手機版時出現又該怎麼辦呢?

• 一般頁面裡，css設成 display:none;
• AMP頁面裡更簡單了!只要不設手機版的AMP元件，然後非手機版的AMP元件如上例寫即可。

然後…你發現這裡有個恐怖的狀況了嗎?!同一個圖片，因應不同寬度的layout，我們就要做圖片元件幾次，而且寬高都要設定（css我們常只設圖片 width: ox%; height 就讓他自動處理了），so…圖片搭配上 RWD ，在 AMP 的世界裡，是繁索的工作。