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/手机: <= 768pxtablet/平板: 769px ~ 1023pxdesktop/桌面: 1024px ~ 1215pxwidescreen/宽屏: 1216px ~ 1407pxfullhd/全屏高清: >= 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)