1. WIKI教程
2. 学习Foundation
3. 基金会 - 媒体查询( Media Queries)

基金会 - 媒体查询( Media Queries)

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

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

• Small - 用于任何屏幕。

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

• Large - 用于1024像素和更宽的屏幕。

您可以使用breakpoint classes更改屏幕大小。 例如，您可以将.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变量来更改设置文件中的$breakpoint-classes 。 如果你想在CSS中使用.large类，那么将它添加到列表的末尾，如下所示 -

$breakpoints-classes: (small medium large);

假设您要在CSS中使用.xlarge类，然后将此类添加到列表的末尾，如下所示 -

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

SASS

Breakpoint Mixin

• 您可以使用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) { }
}

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

断点功能

• 您可以使用内部函数来使用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参考

变量 (Variables)

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

Sr.No.	名称和描述	类型	默认值
1	$breakpoints 它是一个断点名称，可用于使用breakpoint() mixin编写媒体查询。	Map	小:0px 中等:640px 大:1024px xlarge:1200px xxlarge:1440px
2	$breakpoint-classes 您可以通过修改$breakpoint-classes变量来更改CSS类输出。	List	small medium large

Mixins

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

BREAKPOINT

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

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

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

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

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

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

Sr.No.	名称和描述	类型	默认值
1	$value 它使用断点名称，px，rem或em值处理值。	keyword or number	None

功能 (Functions)

BREAKPOINT

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

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

Sr.No.	名称和描述	类型	默认值
1	$val 它使用断点名称，px，rem或em值处理值。	keyword or number	small

JavaScript参考

功能 (Functions)

有两种类型的功能 -

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

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

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

Sr.No.	名称和描述	类型
1	size 它分别检查并获取指定函数的断点名称。	String