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，然後居中顯示。

（完）