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

支援的 layout 值

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

• fill - 此區塊會填滿母元件的區塊（母元件必為 position:relative 或 position:absolute）。 width 和 height 非必填。

• fixed - 一定要設定 width 與 height ，而且不支援 responsive ，相當於 inline-block 。

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

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

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

• nodisplay - display: none; 的元件， width 和 height 非必填。

• responsive - 元件的大小會取決於父元素以及此元件本身的內容，元件本身不會有固定的寬高。一定要設定 width 與 height，也可使用 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官網
• AMP官網 - Layout Attributes
• Replaced Elements