基础教程

Foundation - Media Queries

媒体查询是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>

更改断点

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

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) { }
}

您可以使用三种媒体查询人像，风景和视网膜获取设备方向或像素密度它们不是基于宽度的媒体查询.

断点函数

你可以通过使用内部使用 breakpoint() mixin的功能函数.
断点()功能可直接用于编写自己的媒体查询 :

@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 作为当前断点名称.
您可以使用

Foundation.MediaQuery.get('small')

Sass Reference

变量

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

Sr.No.	姓名&说明	类型	默认值
1	$ breakpoints 这是一个断点名称，可用于使用断点编写媒体查询() mixin.	地图	小:0px 中:640px 大:1024px xlarge:1200px xxlarge:1440px
2	$ breakpoint-classes 您可以通过修改CSS类输出来更改 $ breakpoint-classes 变量.	列表	小中大

Sr.No.

姓名&说明

类型

默认值

$ breakpoints

这是一个断点名称，可用于使用断点编写媒体查询() mixin.

地图

小:0px

中:640px

大:1024px

xlarge:1200px

xxlarge:1440px