UIkitのブレークポイント
UIkitは以下のブレークポイントを提供します。これらはデフォルトで以下のスクリーン幅に対応しています。
| 名前 | サイズ（最小値） | 用途 |
| @s | 640px | 小さい画面用（スマートフォンなど） |
| @m | 960px | 中くらいの画面用（タブレットなど） |
| @l | 1200px | 大きい画面用（デスクトップなど） |
| @xl | 1600px | 非常に大きい画面用（大型ディスプレイなど） |
CSSでの使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* 小さい画面用 */ @media (min-width: 640px) { /* スタイル */ } /* 中くらいの画面用 */ @media (min-width: 960px) { /* スタイル */ } /* 大きい画面用 */ @media (min-width: 1200px) { /* スタイル */ } /* 非常に大きい画面用 */ @media (min-width: 1600px) { /* スタイル */ } |
使用例
|
1 2 3 4 5 6 7 |
<div class="uk-hidden@s">スマホで隠す</div> <div class="uk-visible@m">タブレット以上で表示</div> <div class="uk-grid uk-grid-medium@m uk-grid-large@l"> <div>コンテンツ1</div> <div>コンテンツ2</div> </div> |
カスタマイズ
テーマ設定ファイル（Sass変数）を編集することで変更できます。
以下の変数を変更することでブレークポイントを調整可能です。
|
1 2 3 4 5 |
// UIkitのデフォルトブレークポイント $uk-breakpoint-small: 640px; $uk-breakpoint-medium: 960px; $uk-breakpoint-large: 1200px; $uk-breakpoint-xlarge: 1600px; |
