媒体查询是CSS3模块，其中包括诸如宽度，高度，颜色之类的媒体功能，并根据指定的屏幕分辨率显示内容。

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

• 小-用于任何屏幕。
• 中-用于640像素或更宽的屏幕。
• 大-用于1024像素或更宽的屏幕。

您可以使用断点类来更改屏幕尺寸。例如，您可以将.small-6类用于小尺寸屏幕，并将.medium-4类用于中型屏幕，如以下代码片段所示-

更改断点

如果您的应用程序使用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);

萨斯

断点混合

• 您可以使用breakpoint() mixin和@include来编写媒体查询。
• 使用down或only关键字以及断点值来更改媒体查询的行为，如以下代码格式所示-

.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函数显示小，中，大作为当前断点名称。
• 您可以使用MediaQuery.get函数获取断点的媒体查询，如下所示：

Foundation.MediaQuery.get('small')

Sass参考

变数

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

混合蛋白

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

断点

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

• 如果字符串传递，然后混入搜索在$断点字符串映射，并创建媒体查询。
• 如果使用像素值，则使用$ rem-base将其转换为em值。
• 如果传递了rem值，则它将其单位更改为em。
• 如果您正在使用em值，则可以按原样使用它。

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

功能

断点

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

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

JavaScript参考

功能

有两种类型的功能-

• .atLeast-检查屏幕。它必须至少宽到作为断点。
• .get-用于获取断点的媒体查询。

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