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)
|