iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

AMP系列 第 5

AMP(Lession 5) - 依區塊而改變文字大小 amp-fit-text

依區塊而改變文字大小的 amp-fix-text

支援的 layout

可使用在具有 display: blockdisplay: inlline-block 特性的元件上。所以,先來了解一下,支援 amp-fix-textlayout 有哪些。

  • fill - 此區塊會填滿母元件的區塊(母元件必為 position:relativeposition:absolute)。 widthheight 非必填。

  • fixed - 一定要設定 widthheight ,而且不支援 responsive ,相當於 inline-block

  • fixed-height - 故名思意, height 值為固定 , width 值不設或是為 auto

  • flex-item - 其父級元件為 display: flexwidthheight 為非必填。

  • intrinsic - 可用空間取決於父元素與寬高比,會自動調整元件本身可用的高度,行為就像是 Replaced Elements 。一定要設定 widthheight,也可使用 max-width 。大部分的 AMP 元件都可用。

  • nodisplay - display: none; 的元件, widthheight 非必填。

  • responsive - 元件的大小會取決於父元素以及此元件本身的內容,元件本身不會有固定的寬高。一定要設定 widthheight,也可使用 max-width

使用 <amp-fif-text>

  • 引入 <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

  • 控制字體大小的 attributes

    • min-font-size - integer,單位 px ,非必設的項目,指定字體最小的大小

    • max-font-size - integer,單位 px ,非必設的項目,指定字體最大的大小


參考來源:


上一篇
AMP(Lession 4) - 字型
下一篇
AMP(Lession 6) - 使用 amp-bind 處理 view 、 data 、 user event 間的關係
系列文
AMP30

尚未有邦友留言

立即登入留言