Sizing

可快速設定寬與高的通用類別。


Width

width min-width max-width

可設定寬、最大寬度、最小寬度的通用類別。寬度類別名稱前綴詞為 .u-w:;最小寬度的代號為 i,類別名稱前綴詞為 .u-wi:;最大寬度的代號為 x,類別名稱前綴詞為 .u-wx:

可透過最大寬度設定來決定 .container 最大顯示範圍。

寬度通用類別可使用的值:

  • 0, none, auto
  • 25%, 50%, 75%, 100%
  • 25vw, 50vw, 75vw, 100vw
  • 25vh, 50vh, 75vh, 100vh
  • 32px, 48px, 64px, 80px, 96px, 128px, 240px, 360px, 540px, 720px, 960px, 1140px, 1200px, 1440px

範例

<div class="container u-wx:1200px"></div> <div class="u-w:100%"></div> <div class="u-wi:50vw"></div>

Height

height min-height max-height

可設定高、最大高度、最小高度的通用類別。高度類別名稱前綴詞為 .u-h:;最小寬度的代號為 i,類別名稱前綴詞為 .u-hi:;最大寬度的代號為 x,類別名稱前綴詞為 .u-hx:

高度通用類別可使用的值:

  • 0, none, auto
  • 25%, 50%, 75%, 100%
  • 25vw, 50vw, 75vw, 100vw
  • 25vh, 50vh, 75vh, 100vh
  • 48px, 96px, 128px, 256px

範例

<div class="u-h:100vh"></div> <div class="u-hi:256px"></div> <div class="u-hx:100%"></div>