Foundation - 媒體查詢

---

---

媒體查詢是 CSS3 模組，它包含媒體特性，例如寬度、高度、顏色，並根據指定的螢幕解析度顯示內容。

Foundation 使用以下媒體查詢來建立斷點範圍：

• 小型 - 用於任何螢幕。

• 中型 - 用於 640 畫素及更寬的螢幕。

• 大型 - 用於 1024 畫素及更寬的螢幕。

您可以使用斷點類更改螢幕大小。例如，您可以對小型螢幕使用.small-6類，對中型螢幕使用.medium-4類，如下面的程式碼片段所示：

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

更改斷點

如果您的應用程式使用 Foundation 的 Sass 版本，您可以更改斷點。您可以將斷點名稱放在設定檔案中的$breakpoints變數下，如下所示：

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

您可以透過修改設定檔案中的$breakpoint-classes變數來更改斷點類。如果您想在 CSS 中使用.large類，則將其新增到列表的末尾，如下所示：

$breakpoints-classes: (small medium large);

假設您想在 CSS 中使用.xlarge類，然後將此類新增到列表的末尾，如下所示：

$breakpoints-classes: (small medium large xlarge);

Sass

斷點混合宏

• 您可以使用breakpoint()混合宏以及@include來編寫媒體查詢。

• 使用down或only關鍵字以及斷點值來更改媒體查詢的行為，如下面的程式碼格式所示：

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }
   
   // code for medium screens only
   @include breakpoint(medium only) { }
}

您可以使用三個媒體查詢portrait、landscape和retina來處理裝置方向或畫素密度，它們不是基於寬度的媒體查詢。

斷點函式

• 您可以使用內部函式使用breakpoint()混合宏的功能。

• 可以直接使用breakpoint()功能來編寫自己的媒體查詢：

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

使用媒體查詢

• Foundation JavaScript 提供了MediaQuery.current函式，用於訪問Foundation.MediaQuery物件上的當前斷點名稱，如下所示：

Foundation.MediaQuery.current

• MediaQuery.current函式顯示small、medium、large作為當前斷點名稱。

• 您可以使用MediaQuery.get函式獲取斷點的媒體查詢，如下所示：

Foundation.MediaQuery.get('small')

Sass 參考

變數

下表列出了可用於自定義元件預設樣式的 Sass 變數：

混合宏

混合宏建立一組樣式，用於構建 Foundation 元件的 CSS 類結構。

BREAKPOINT

它使用breakpoint()混合宏建立媒體查詢，幷包括以下活動：

• 如果傳遞字串，則混合宏會在$breakpoints對映中搜索字串並建立媒體查詢。

• 如果您使用畫素值，則使用$rem-base將其轉換為 em 值。

• 如果傳遞 rem 值，則將其單位更改為 em。

• 如果您使用 em 值，則可以直接使用。

下表指定斷點使用的引數：

函式

BREAKPOINT

它使用breakpoint()混合宏建立與匹配輸入值匹配的媒體查詢。

下表指定斷點使用的可能的輸入值：

JavaScript 參考

函式

有兩種型別的函式：

• .atLeast - 它檢查螢幕。它必須至少與斷點一樣寬。

• .get - 用於獲取斷點的媒體查詢。

下表指定上述函式使用的引數：