媒体查询
使用媒体查询设计响应式 HTML 电子邮件，适用于任何电子邮件客户端。
默认媒体查询
CSS 媒体查询允许我们调整内容在不同屏幕尺寸下的显示和方向。
Foundation for Emails 有一个断点
- 小：596 像素或更小。
许多组件可以在不同屏幕尺寸下使用特殊的断点类进行修改。网格是最明显的例子。
CSS 版本您可以在每个断点上使用具有类的网格来定义列的宽度。.small-6 在小断点上创建一个六列宽的容器（50%）宽度。您可以在大断点上通过定义另一种大小（如 .large-4）来覆盖此行为。
Inky 版本在 Inky 中，您可以使用 small="x" 和 large="x" 属性定义宽度。
HTML
<style>
.columns {border: 1px solid #333;}
</style>
<row>
<columns small="6" large="4">4 columns, 6 columns on small</columns>
<columns small="6" large="8">8 columns, 6 columns on small</columns>
</row><html>
<head>
<style>
.columns {
border: 1px solid #333;
}
</style>
</head>
<body>
<table class="row">
<tbody>
<tr>
<th class="small-6 large-4 columns first">
<table>
<tbody>
<tr>
<th>4 columns, 6 columns on small</th>
</tr>
</tbody>
</table>
</th>
<th class="small-6 large-8 columns last">
<table>
<tbody>
<tr>
<th>8 columns, 6 columns on small</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</body>
</html>演示
使用媒体查询
媒体查询将封装您希望影响的样式。由于只有一个断点需要考虑，并且它是最大宽度，因此您的移动样式或覆盖将进入媒体查询。如果您使用的是 CSS 版本的 Foundation，请使用此媒体查询模仿核心断点
/* Small only */
@media screen and (max-width: 596px) {}Sass 版本的 Foundation 使用一个方便的变量来设置断点宽度。使用此媒体查询来模仿核心断点
/* Small only */
@media only screen and (max-width: #{$global-breakpoint}) {}示例用法
.newsletter-title {
text-transform: uppercase;
font-size: 9px;
padding-left: 40px;
font-weight: bold;
@media only screen and (max-width: #{$global-breakpoint}) {
padding-left: 0;
}
}@media only screen and (max-width: #{$global-breakpoint}) {
p {
font-size: 19px;
font-weight: 600;
}
}更改断点
在 Sass 版本中更改断点很容易。在 _settings.scss 中，您可以控制此断点的宽度。
$global-breakpoint: $global-width + $global-gutter;$global-breakpoint 是 $global-width 和 $global gutter 的组合宽度。您可以在此处硬编码一个像素值而不是变量，或更改 $global-width（推荐），因为它考虑了间隙计算。
$global-width: 580px;