Bulmaのすべての要素はモバイルファーストであり、垂直方向の読みやすさを最適化しているため、モバイルではデフォルトで
columnsは垂直方向にスタックされますlevelコンポーネントは、その子要素を垂直方向にスタックして表示しますnavメニューは非表示になります
ただし、is-mobile修飾子を追加することで、columnsまたはlevelの両方に水平方向のレイアウトを強制することができます。
スポンサー
レスポンシブ対応
Bulmaはモバイルファーストのフレームワークです
デフォルトで垂直方向 #
ブレイクポイント #
Bulmaには4つのブレイクポイントがあり、5つの画面サイズを定義しています
-
mobile: 最大768px -
tablet:769pxから -
desktop:1024pxから -
widescreen:1216pxから -
fullhd:1408pxから
これらのブレイクポイントを利用するために、Bulmaは9つのレスポンシブMixinを提供しています。
| モバイル 最大 768px |
タブレット769pxから1023pxまで |
デスクトップ1024pxから1215pxまで |
ワイドスクリーン1216pxから1407pxまで |
フルHD1408px以上 |
|---|---|---|---|---|
|
モバイル向け |
- |
|||
|
- |
タブレット向け |
|||
|
- |
デスクトップ向け |
|||
|
- |
ワイドスクリーン向け |
|||
|
- |
フルHD向け |
|||
|
- |
タブレットのみ |
- |
||
|
- |
デスクトップのみ |
- |
||
|
- |
ワイドスクリーンのみ |
- |
||
|
タッチデバイス向け |
- |
|||
|
ワイドスクリーン未満 |
- |
|||
|
フルHD未満 |
- |
|||
これらのブレイクポイントを簡単に使用するために、Bulmaは使いやすいレスポンシブMixinを提供しています。
ブレイクポイントの無効化 #
デフォルトでは、$widescreenと$fullhdのブレイクポイントは有効になっています。対応するSassの真偽値をfalseに設定することで無効にすることができます
// Disable the widescreen breakpoint
$widescreen-enabled: false;
// Disable the fullhd breakpoint
$fullhd-enabled: false;|
Sass変数
|
CSS変数
|
値
|
|---|