Bulma CSS – 响应式

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

手机显示

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

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

如果想在手机上强制水平布局显示,可以给columnslevelis-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)


浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载