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 {
    // 适用于中等屏幕及更小屏幕的代码
    @include breakpoint(medium down) { }
    
    // 仅适用于中等屏幕的代码
    @include breakpoint(medium only) { }
}

您可以使用三种媒体查询 portrait、landscape 和 retina 来设置设备方向或像素密度，它们不是基于宽度的媒体查询。

断点函数

• 您可以通过使用内部函数来使用 breakpoint() mixin 的功能。

• 可以直接使用 breakpoint() 功能来编写自己的媒体查询 −

@media screen and #{breakpoint(medium)} {
    // 中等屏幕及以上样式的代码
}

JavaScript

使用媒体查询

• Foundation JavaScript 提供了MediaQuery.current 函数用于访问 Foundation.MediaQuery 对象上的当前断点名称，如下所示 −

Foundation.MediaQuery.current

• MediaQuery.current 函数显示 small、medium、large 作为当前断点名称。

• 您可以使用 MediaQuery.get 函数获取断点的媒体查询，如下所示 −

Foundation.MediaQuery.get('small')

Sass 参考

变量

下表列出了 SASS 变量，可用于自定义组件的默认样式 −

Mixins

Mixins 创建一组样式来为 Foundation 组件构建 CSS 类结构。

BREAKPOINT

它使用 breakpoint() mixin 创建媒体查询并包括以下活动 −

• 如果传递了字符串，则 mixin 在 $breakpoints 映射中搜索字符串并创建媒体查询。

• 如果您使用的是像素值，则使用 $rem-base 将其转换为 em 值。

• 如果传递了 rem 值，则将其单位更改为 em。

• 如果您使用的是 em 值，则可以按原样使用。

下表指定了断点 − 使用的参数

函数

BREAKPOINT

它使用 breakpoint() mixin 来创建具有匹配输入值的媒体查询。

下表指定了断点 − 使用的可能输入值

JavaScript 参考

函数

有两种类型的函数 −

• .atLeast − 检查屏幕。它必须至少与断点一样宽。

• .get − 用于获取断点。

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