Size

サイズ変更を行う Utility を、すべてのモジュールに対して使えます。

Add Class.is-xxs.is-xs.is-sm.is-md.is-lg.is-xl.is-xxl
Change Size62.5%75%87.5%100%125%150%200%

Responsive

.is-(xxxx)-(yy) 形式の class を加えることでレスポンシブにサイズを変化させられます。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

62.5%

.is-mobile-xxs

.is-fablet-xxs

.is-tablet-xxs

.is-desktop-xxs

.is-wide-xxs

75%

.is-mobile-xs

.is-fablet-xs

.is-tablet-xs

.is-desktop-xs

.is-wide-xs

87.5%

.is-mobile-sm

.is-fablet-sm

.is-tablet-sm

.is-desktop-sm

.is-wide-sm

100%

.is-mobile-md

.is-fablet-md

.is-tablet-md

.is-desktop-md

.is-wide-md

125%

.is-mobile-lg

.is-fablet-lg

.is-tablet-lg

.is-desktop-lg

.is-wide-lg

150%

.is-mobile-xl

.is-fablet-xl

.is-tablet-xl

.is-desktop-xl

.is-wide-xl

200%

.is-mobile-xxl

.is-fablet-xxl

.is-tablet-xxl

.is-desktop-xxl

.is-wide-xxl

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

62.5%

.is-mobile-only-xxs

.is-fablet-only-xxs

.is-tablet-only-xxs

.is-desktop-only-xxs

75%

.is-mobile-only-xs

.is-fablet-only-xs

.is-tablet-only-xs

.is-desktop-only-xs

87.5%

.is-mobile-only-sm

.is-fablet-only-sm

.is-tablet-only-sm

.is-desktop-only-sm

100%

.is-mobile-only-md

.is-fablet-only-md

.is-tablet-only-md

.is-desktop-only-md

125%

.is-mobile-only-lg

.is-fablet-only-lg

.is-tablet-only-lg

.is-desktop-only-lg

150%

.is-mobile-only-xl

.is-fablet-only-xl

.is-tablet-only-xl

.is-desktop-only-xl

200%

.is-mobile-only-xxl

.is-fablet-only-xxl

.is-tablet-only-xxl

.is-desktop-only-xxl

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

62.5%

.is-mobile-fablet-xxs

.is-mobile-tablet-xxs

.is-mobile-desktop-xxs

75%

.is-mobile-fablet-xs

.is-mobile-tablet-xs

.is-mobile-desktop-xs

87.5%

.is-mobile-fablet-sm

.is-mobile-tablet-sm

.is-mobile-desktop-sm

100%

.is-mobile-fablet-md

.is-mobile-tablet-md

.is-mobile-desktop-md

125%

.is-mobile-fablet-lg

.is-mobile-tablet-lg

.is-mobile-desktop-lg

150%

.is-mobile-fablet-xl

.is-mobile-tablet-xl

.is-mobile-desktop-xl

200%

.is-mobile-fablet-xxl

.is-mobile-tablet-xxl

.is-mobile-desktop-xxl

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

62.5%

.is-landscape-xxs

.is-portrait-xxs

75%

.is-landscape-xs

.is-portrait-xs

87.5%

.is-landscape-sm

.is-portrait-sm

100%

.is-landscape-md

.is-portrait-md

125%

.is-landscape-lg

.is-portrait-lg

150%

.is-landscape-xl

.is-portrait-xl

200%

.is-landscape-xxl

.is-portrait-xxl

Last Updated: 11/6/2018, 1:24:05 AM