<< Foundation JavaScript 实用程序 Foundation 网格 >>

Foundation 媒体查询

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

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

Small-用于任何屏幕。 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);

SASS

断点混合

您可以使用 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 参考

变量

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

名称和描述	输入	默认值
$breakpoints 这是一个断点名称，可以使用 breakpoint() 混合。	地图	小：0px 中：640px 大：1024px xlarge：1200px xxlarge：1440px
$breakpoint-classes 您可以通过修改 $breakpoint-classes 变量来更改 CSS 类输出。	列表	小中大

Mixins

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

断点

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

如果传递了字符串，则 mixin 在 $breakpoints 映射中搜索字符串并创建媒体查询。如果您使用像素值，则使用 $rem-base 将其转换为 em 值。如果传递了 rem 值，则将其单位更改为 em。如果您使用的是 em 值，则可以按原样使用。

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

名称和描述	类型	默认值
$value 使用断点名称、px、rem 或 em 值来处理值。	关键字或数字	无

功能

断点

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

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

名称和描述	类型	默认值
$val 它使用断点名称、px、rem 或 em 值来处理值。	关键字或数字	小

JavaScript 参考

功能

有两种类型的函数-

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

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

名称和描述	输入
size 它分别检查并获取指定函数的断点名称。	字符串

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< Foundation JavaScript 实用程序 Foundation 网格 >>

昵称：邮箱：