Bulma 中的媒体查询

在 Bulma 中将设备分为 6 类：手机、平板、触屏设备、桌面、宽屏和大屏。提供了四个阈值。

// sass/utilities/variables.sass

$tablet: 769px !default
$desktop: 1000px !default
$widescreen: 1192px !default
$fullhd: 1384px !default

这些设备及对应设备宽度的范围如下：

1. 手机：0px ~ 768px
2. 平板：769px ~ 999px
3. 触屏设备：0px ~ 999px
4. 桌面：1000px ~ 1191px
5. 宽屏：1192px ~ 1383px
6. 大屏：1384px+

我们使用混合定义设备的媒体查询。

=from($device)
  @media screen and (min-width: $device)
    @content

=until($device)
  @media screen and (max-width: $device - 1px)
    @content

// 平板宽度以下的设备认为是手机设备
=mobile
  @media screen and (max-width: $tablet - 1px)
    @content

=tablet
  @media screen and (min-width: $tablet)
    @content

// 仅在平板设备下
=table-only
  @media screen and (min-width: $tablet) and  (max-width: $desktop - 1px)
    @content

// 桌面宽度以下的设备认为是触屏设备
=touch
  @media screen and (max-width: $desktop - 1px)
    @content

=desktop
  @media screen and (min-width: $desktop)
    @content

// 仅在桌面设备下
=desktop-only
  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
    @content

=widescreen
  @media screen and (min-width: $widescreen)
    @content

// 仅在宽屏设备下
=widescreen-only
  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
    @content

=fullhd
  @media screen and (min-width: $fullhd)
    @content

接下来，如果要针对某个设备下进行样式编写，则可以这样使用。

.container
  +desktop
    margin: 0 auto
    width: $desktop - 40px

正如上面代码反映的一样，在桌面环境+的设备中，.container 的宽度固定为“$desktop - 40px”，也就是 960px，然后居中显示。

（完）