Bulma 默认响应。 了解有关 Bulma 响应性的更多信息。
赞助商
Bulma Sass 响应式混合
允许您为每个屏幕大小定义不同样式的混合
from() 和 until() 混合 #
CSS 中的响应性基于媒体查询（请参阅 MDN 文档）。
Bulma 提供了2 个有用的响应式混合：
-
针对屏幕宽度大于或等于断点的设备
@mixin from($breakpoint) -
针对屏幕宽度小于断点的设备
@mixin until($breakpoint)
其用法非常简单
from() #
from() 混合具有一个参数，用于设置将应用其包含的样式的屏幕宽度
Sass 源
@use "bulma/sass/utilities/mixins";
.my-element {
background: red;
@include mixins.from(1280px) {
background: blue;
}
}CSS 输出
.my-element {
background: red;
}
@media screen and (min-width: 1280px) {
.my-element {
background: blue;
}
}
对于宽度为 1279px 或更小的屏幕，元素的背景将为 红色。
对于宽度为 1280px 或更大的屏幕，元素的背景将为 蓝色。
until() #
until() 混合具有一个参数，用于设置将应用其包含的样式的屏幕宽度（减去 1px）。
这意味着，如果你设置的值为 1280px，则样式将应用于屏幕宽度为 1279px 的屏幕，但不应用于屏幕宽度为 1280px 的屏幕。
设置此1px 偏移的原因是允许你使用 from() 和 until() 以及相同的断点值。这使得 2 组规则之间没有间隙。
Sass 源
@use "bulma/sass/utilities/mixins";
$breakpoint: 1280px;
.my-element {
@include mixins.until($breakpoint) {
background: green;
}
@include mixins.from($breakpoint) {
background: orange;
}
}CSS 输出
@media screen and (max-width: 1279px) {
.my-element {
background: green;
}
}
@media screen and (min-width: 1280px) {
.my-element {
background: orange;
}
}
对于宽度为 1279px 或更小的屏幕，元素的背景将为 绿色。
对于宽度为 1280px 或更大的屏幕，元素的背景将为 橙色。
命名混合 #
通过拥有4 个断点并支持5 个屏幕尺寸，Bulma 可以支持许多不同的设置。
虽然你可以使用混合
@include mixins.from()@include mixins.until()这些响应式混合以 Bulma 中使用的屏幕尺寸和断点命名，以便你可以使用它们来创建响应式设计
|
移动设备 最大为 768px
|
平板电脑 介于 769px 和 1023px 之间
|
台式机 介于 1024px 和 1215px 之间
|
宽屏 介于 1216px 和 1407px 之间
|
全高清1408px 及以上
|
|---|---|---|---|---|
|
- |
|||
|
- |
|
|||
|
- |
|
|||
|
- |
|
|||
|
- |
|
|||
|
- |
|
- |
||
|
- |
|
- |
||
|
- |
|
- |
||
|
- |
|||
|
- |
|||
|
- |
|||
详细了解 Bulma 响应性。