Bulma 的每个元素都是移动设备优先,而且为竖屏阅读做过优化,所以默认为使用移动设备:
columns
会竖向堆叠level
组件会竖向堆叠显示其子元素nav
菜单会隐藏
您可以通过添加 is-mobile
修饰符强制 columns
或 level
横向(horizontal)布局。
自适应
Bulma 是移动设备优先的框架
Bulma 的每个元素都是移动设备优先,而且为竖屏阅读做过优化,所以默认为使用移动设备:
columns
会竖向堆叠level
组件会竖向堆叠显示其子元素nav
菜单会隐藏您可以通过添加 is-mobile
修饰符强制 columns
或 level
横向(horizontal)布局。
Bulma 使用 4 个断点定义了 5 个屏幕尺寸:
mobile
: 上限到 768px
tablet
: 从 769px
开始desktop
: 从 1024px
开始widescreen
: 从 1216px
开始fullhd
: 从 1408px
开始利用这些断点,Bulma 提供了 9 种自适应混入。
移动设备 上限到 768px
|
平板 在 769px 到 1023px 之间
|
桌面系统 在 1024px 到 1215px 之间
|
宽屏 在 1216px 到 1407px 之间
|
巨屏1408px 及以上
|
---|---|---|---|---|
移动设备 |
- |
|||
- |
平板 |
|||
- |
桌面系统 |
|||
- |
宽屏 |
|||
- |
巨屏 |
|||
- |
仅平板 |
- |
||
- |
仅桌面 |
- |
||
- |
仅宽屏 |
- |
||
触屏 |
- |
|||
宽屏以下 |
- |
|||
巨屏以下 |
- |
为了简化这些断点的使用, Bulma 提供了易用自适应混入。
默认情况下,$widescreen
和 $fullhd
断点是 启用的。您可以通过设置相关 Sass 的 boolean 值为 false
来禁用:
此页面为开放源码页面。
发现排版问题?或者表达模糊?
在 GitHub 改进该页内容