媒体查询

JavaScript

CSS 媒体查询允许我们根据不同的屏幕尺寸调整内容的显示和方向。

默认媒体查询

网站基础有三个核心断点

小型： 任何屏幕。
中型： 任何 640 像素或更大的屏幕。
大型： 任何 1024 像素或更大的屏幕。

许多组件可以使用特殊的断点类在不同的屏幕尺寸下进行修改。网格是最明显的例子。在下面的代码中，左侧列在小屏幕上为六列宽，因此使用 .small-6。在中等大小的屏幕上，类 .medium-4 会覆盖小型样式，将列更改为四列宽。

<div class="grid-x grid-margin-x">
  <div class="cell small-6 medium-4"></div>
  <div class="cell small-6 medium-8"></div>
</div>

如果您使用的是 CSS 版本的基础，请使用以下媒体查询来模仿三个核心断点

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

从基础 5 升级

在基础 5 中，可以使用一系列名为 $small-up、$small-only、$medium-only 等的 Sass 变量访问断点。在基础 6 中，这种编写媒体查询的方法已被替换为专用的断点混合，如下所述。旧版变量将在基础 6.3 中删除。

要升级现有的媒体查询，请替换如下规则集

@media #{$medium-only} {
}

使用以下内容

@include breakpoint(medium only) {
}

更改断点

如果您使用的是 Sass 版本的基础，则可以更改默认断点。断点的名称及其宽度存储在设置文件中的 $breakpoints 变量中。

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

即使上述值以像素为单位，它们最终也会转换为 em 以用于媒体查询。

更改任何断点的宽度就像更改此地图中的像素值一样简单。请注意，这里有两个额外的断点：xlarge 和 xxlarge。我们不会将它们用于任何组件，并且默认情况下也不会输出任何使用它们的 CSS 类。

请注意，断点的顺序必须按升序排列，以便下面的 breakpoint 函数中的 down 等关键字才能按预期工作，例如

您可以通过修改设置文件中的 $breakpoint-classes 变量来更改它。这是一个断点名称列表。从此列表中添加或删除名称将更改 CSS 类输出。默认情况下，它如下所示

$breakpoint-classes: (small medium large);

例如，要在 CSS 中获取 .xlarge 类以用于网格、菜单等，只需将其添加到列表的末尾即可

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

Sass

断点混合

我们的 breakpoint() 混合使得编写媒体查询变得容易。您可以使用命名的断点或自定义的像素、rem 或 em 值。

要使用混合，请使用 @include 调用它，然后将您想要包含的 CSS 内容放在大括号内。

.element {
  // Only affects medium screens and larger
  @include breakpoint(medium) {
    // All CSS in here goes inside the media query
  }
}

可以通过在断点值后面添加关键字 down 或 only（用空格分隔）来更改媒体查询的行为。

.element {
  // Only affects medium screens and smaller
  @include breakpoint(medium down) { }
  // Only affects medium screens, not small or large
  @include breakpoint(medium only) { }
}

也可以传入自定义值。您可以输入像素、rem 或 em 值——所有值最终都会转换为 em。

.element {
  // Converted to 20em
  @include breakpoint(320px) { }
  // Unitless values are assumed to be pixels
  @include breakpoint(320) { }
  // Converted to 40em
  @include breakpoint(40rem) { }
}

最后，有三个特殊的媒体查询不是基于宽度的：portrait、landscape 和 retina。将这些关键字与 breakpoint() 混合使用将输出用于设备方向或像素密度的媒体查询，而不是屏幕宽度。

.element {
  @include breakpoint(landscape) {
    // CSS for landscape-oriented devices only
  }
  @include breakpoint(retina) {
    // CSS for high-resolution displays only
  }
}

断点函数

breakpoint() 混合的功能来自一个内部函数，也称为 breakpoint()。如果您想编写自己的媒体查询，可以直接使用 breakpoint() 函数访问混合的逻辑。

@media screen and #{breakpoint(medium)} {
  // Medium and up styles
}

这可用于将多个媒体查询组合在一起。

@media screen and #{breakpoint(medium)} and #{breakpoint(xlarge down)} {
  // Medium to extra large styles
}

JavaScript

使用媒体查询

Foundation JavaScript 包含一组用于处理媒体查询的辅助函数。它们都在 Foundation.MediaQuery 对象上。

MediaQuery 实用程序使用 Sass 断点设置，并要求导入 Foundation CSS。对于 Sass 用户，您需要包含 `foundation-everything()` 或 `foundation-global-styles()`。

使用 MediaQuery.current 获取当前断点的名称。

Foundation.MediaQuery.current // => 'small', 'medium', etc.

您可以使用 MediaQuery.is() 检查屏幕所在的断点。

Foundation.MediaQuery.is('medium') // => True for "medium" or larger

您还可以像在 Sass 中一样使用 up（默认）、only 和 down 修饰符，或使用等效的 MediaQuery.atLeast()、MediaQuery.only() 和 MediaQuery.upTo()。

// ↑ True for "medium" or larger (by default)
Foundation.MediaQuery.is('medium up');
Foundation.MediaQuery.atLeast('medium');

// → True for "medium" only
Foundation.MediaQuery.is('medium only');
Foundation.MediaQuery.only('medium');

// ↓ True for "medium" or smaller
Foundation.MediaQuery.is('medium down');
Foundation.MediaQuery.upTo('medium');

要获取断点的媒体查询，请使用 MediaQuery.get。

Foundation.MediaQuery.get('medium') // => only screen and (min-width: 640px)

监视断点更改

每次断点更改时，媒体查询助手都会在窗口上广播一个事件。我们在内部将其与 Interchange 等插件一起使用，以检测断点的变化。您也可以自己订阅该事件。

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
  // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint
});

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。

名称	类型	默认值	描述
`$-zf-size`		`null`	修复问题 #12080 的补丁
`$breakpoints`	地图	`"small": 0 "medium": 640px "large": 1024px "xlarge": 1200px "xxlarge": 1440px`	命名断点列表。您可以将这些与 `breakpoint()` 混合使用以快速创建媒体查询。
`$breakpoints-hidpi`	地图	`"hidpi-1": 1 "hidpi-1-5": 1.5 "hidpi-2": 2 "retina": 2 "hidpi-3": 3`	命名 HiDPI 断点列表。您可以将这些与 `breakpoint()` 混合使用以快速创建分辨率的媒体查询。值必须表示设备像素/网络像素比率，并且必须是无单位的或以 DPPX 为单位。
`$print-breakpoint`	关键字	`large`	要将打印作为媒体类型包含在内的最大命名断点
`$breakpoint-classes`	列表	`small medium large`	此列表中的所有名称都将在您的 CSS 中输出为类，例如 `.small-12`、`.medium-6` 等。此列表中的每个值也必须在 `$breakpoints` 地图中。

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用混合来从我们的组件中构建自己的类结构。

breakpoint

@include breakpoint($values...) { }

将媒体查询包装在您放置在混合中的内容周围。此混合接受多个值

如果传递了一个字符串，则混合将在 $breakpoints 和 $breakpoints-hidpi 地图中查找它，并在那里使用媒体查询。
如果传递了一个像素值，它将使用 $global-font-size 作为基数转换为 em 值。
如果传递了一个 rem 值，则单位将更改为 em。
如果传递了一个 em 值，则将按原样使用该值。

如果传递了多个值，则混合将为上述每个值生成一个媒体查询。由于内容针对每个断点重复，因此此混合只能与跨断点更改的属性一起使用。

参数	类型	默认值	描述
`$values...`	关键字或数字	`无`	要处理的断点名称或 px/rem/em 值。

函数

breakpoint

breakpoint($val)

生成与输入值匹配的媒体查询字符串。有关可能的输入，请参阅 breakpoint() 混合的文档。

参数	类型	默认值	描述
`$val`	关键字或数字	`small`	要处理的断点名称或 px、rem 或 em 值。

JavaScript 参考

初始化

您的 JavaScript 中必须包含以下文件才能使用此插件

foundation.core.js

方法

atLeast

$('#element').foundation('atLeast', size);

检查屏幕宽度是否至少与断点一样宽。

名称	类型	描述
`size`	字符串	要检查的断点的名称。

only

$('#element').foundation('only', size);

检查屏幕是否在给定的断点内。如果小于断点或大于其上限，则返回 false。

名称	类型	描述
`size`	字符串	要检查的断点的名称。

upTo

$('#element').foundation('upTo', size);

检查屏幕是否在断点内或更小。

名称	类型	描述
`size`	字符串	要检查的断点的名称。

is

$('#element').foundation('is', size);

检查屏幕是否与断点匹配。

名称	类型	描述
`size`	字符串	要检查的断点名称，可以是“small only”或“small”。省略“only”将回退到使用 atLeast() 方法。

get

$('#element').foundation('get', size);

获取断点的媒体查询。

名称	类型	描述
`size`	字符串	要获取的断点名称。

$('#element').foundation('next', size);

获取给定断点之后的断点。

名称	类型	描述
`size`	字符串	断点的名称。