Bulma CSS - 响应式

时间:2019-09-16
本文章向大家介绍Bulma CSS - 响应式,主要包括Bulma CSS - 响应式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

Bulma CSS框架教程

Bulma CSS – 简介
Bulma CSS – 开始
Bulma CSS – CSS类
Bulma CSS – 模块化
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)

原文地址:https://www.cnblogs.com/haibianren/p/11525822.html