Bulma CSS - 响应式

---

系列教程

Bulma CSS – 简介
Bulma CSS – 开始
Bulma CSS – CSS类
Bulma CSS – 模块化
Bulma CSS – 响应式

---

Bulma是一个支持响应式的框架，在电脑、手机、平板各种尺寸的屏幕上都可以完美呈现网页。

手机显示

Bulma对于手机显示作了优化：

• columns、level等水平布局在手机上将会垂直排列显示
• nav导航菜单在手机上将被折叠

如果想在手机上强制水平布局显示，可以给columns、level加is-mobile修饰符。

屏幕界线

Bulma规定了5个屏幕宽度界线，区分不同类型的屏幕：

• mobile/手机: <= 768px
• tablet/平板: 769px ~ 1023px
• desktop/桌面: 1024px ~ 1215px
• widescreen/宽屏: 1216px ~ 1407px
• fullhd/全屏高清: >= 1408px

禁用某些屏幕界线

默认情况下，sass源代码中$widescreen-enabled和$fullhd屏幕界线是启用的，可以通过如下修改禁用:

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

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

SASS变量

在SASS源代码中，响应式支持相关的一些变量定义如下：

变量名	类型	默认真	计算值
$gap	size	64px
$tablet	size	769px
$desktop	computed	960px + (2 * $gap)
$widescreen	computed	1152px + (2 * $gap)
$fullhd	computed	1344px + (2 * $gap)