基础 - 媒体查询

---

媒体查询是 CSS3 模块，包含宽度、高度、颜色等媒体功能，并根据指定的屏幕分辨率显示内容。

基金会使用以下媒体查询来创建细分范围 -

• 小- 用于任何屏幕。

• Medium - 用于 640 像素及更宽的屏幕。

• Large - 用于 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>

更改断点

如果您的应用程序使用 SASS 版本的 Foundation，则可以更改断点。您可以将断点名称放置在设置文件中的$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);

萨斯

断点混合

• 您可以使用Breakpoint() mixin 和@include来编写媒体查询。

• 使用down或only关键字以及断点值来更改媒体查询的Behave，如以下代码格式所示 -

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

您可以使用纵向、横向和视网膜三种媒体查询来实现设备方向或像素密度，并且它们不是基于宽度的媒体查询。

断点功能

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

• 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 变量，可用于自定义组件的默认样式 -

混入

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

断点

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

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

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

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

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

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

功能

断点

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

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

JavaScript 参考

功能

有两种类型的函数 -

• .atLeast - 它检查屏幕。至少作为断点它必须很宽。

• .get - 用于获取断点的媒体查询。

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