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 - 用于获取断点的媒体查询。

下表指定上述函数使用的参数：