UIkitのブレークポイント

UIkitは以下のブレークポイントを提供します。これらはデフォルトで以下のスクリーン幅に対応しています。

名前	サイズ（最小値）	用途
@s	640px	小さい画面用（スマートフォンなど）
@m	960px	中くらいの画面用（タブレットなど）
@l	1200px	大きい画面用（デスクトップなど）
@xl	1600px	非常に大きい画面用（大型ディスプレイなど）

CSSでの使用

/* 小さい画面用 */
@media (min-width: 640px) {
  /* スタイル */
}

/* 中くらいの画面用 */
@media (min-width: 960px) {
  /* スタイル */
}

/* 大きい画面用 */
@media (min-width: 1200px) {
  /* スタイル */
}

/* 非常に大きい画面用 */
@media (min-width: 1600px) {
  /* スタイル */
}

使用例

<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変数）を編集することで変更できます。
以下の変数を変更することでブレークポイントを調整可能です。

// UIkitのデフォルトブレークポイント
$uk-breakpoint-small: 640px;
$uk-breakpoint-medium: 960px;
$uk-breakpoint-large: 1200px;
$uk-breakpoint-xlarge: 1600px;

カテゴリー:CSSHTMLJSUIkit