系列教程
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) |