iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
1
Modern Web

AMP系列 第 3

AMP(Lession 3) - 使用AMP做RWD

使用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 的世界裡,是繁索的工作。


上一篇
AMP(Lession 2) - AMP網頁中的Schema
下一篇
AMP(Lession 4) - 字型
系列文
AMP30

尚未有邦友留言

立即登入留言