响应式（Responsiveness）

Bulma 是一个移动优先的响应式CSS框架。

1

本节目录（点击直达）
1、默认垂直显示(Vertical by default)
2、断点(Breakpoints)
3、禁用断点(Disabling breakpoints)

1、默认垂直显示(Vertical by default)

Bulma 中每个元素都是 移动优先 的，并针对 垂直阅读进行优化, 并且默认为在移动设备上显示:

columns: 是垂直堆放的
level: 组件的子元素将垂直堆放
nav: 导航菜单将会隐藏

您可以通过添加 is-mobile 修饰符，强制让columns 或 nav 变为水平布局。

2、断点(Breakpoints)

Bulma 有 5 断点(breakpoints):

mobile: up to 768px
tablet: from 769px
desktop: from 1024px
widescreen: from 1216px
fullhd: from 1408px

Bulma 使用 9 混合响应(responsive mixins):

=mobile
小于 768px
=tablet
大于 769px
=tablet-only
大于 769px 并且小于 1023px
=touch
小于 1023px
=desktop
大于 1024px
=desktop-only
大于 1024px 并且小于 1215px
=widescreen
大于 1216px
=widescreen-only
大于 1216px 并且小于 1407px
=fullhd
大于 1408px

Mobile 小于 `768px`	Tablet 在 `769px` 和 `1023px 之间`	Desktop 在 `1024px` 和 `1215px 之间`	Widescreen 在 `1216px` 和 `1407px 之间`	FullHD `1408px` 以上
mobile	-
-	tablet
-		desktop
-			widescreen
-				fullhd
-	tablet-only	-
-		desktop-only	-
-			widescreen-only	-
touch		-
until-widescreen			-
until-fullhd				-

3、禁用断点(Disabling breakpoints)

自默认情况下, $widescreen 和 $fullhd 断点(breakpoints) 是 可用的. 您可以通过将相应的Sass布尔值设置为false来禁用它们:

// Disable the widescreen breakpoint
  $widescreen-enabled: false
  
  // Disable the fullhd breakpoint
  $fullhd-enabled: false

Variables #

Name

Type

Value

Computed Value

Computed Type

$gap

size

32px

$tablet

size

769px

$desktop

computed

960px + (2 * $gap)

$widescreen

computed

1152px + (2 * $gap)

$fullhd

computed

1344px + (2 * $gap)

23222