全局样式

我们全局的 CSS 包括一些有用的重置，以确保在各种电子邮件客户端之间样式一致。

默认字体大小设置为浏览器样式表的 100%，通常为 16 像素。这确保了与基于浏览器的文字缩放或用户设置的默认设置的兼容性。如果你使用的是基金会 Sass 版本，请编辑 $global-font-size 变量以更改基础字体大小。这可以是百分比值，也可以是像素值。

颜色

Foundation 中的所有交互元素，例如链接和按钮，都使用同一种颜色。你在整个 Foundation 中看到的蓝色阴影来自 $primary-color Sass 变量。

许多组件也可以用其他四种颜色进行着色：辅助、警报、成功和警告。使用这些颜色为 UI 元素和操作提供更多上下文。

主要

辅助

成功

警告

警报

白色

浅灰色

中等灰色

深灰色

黑色

颜色类

一些组件，如按钮和标注，具有着色类，它允许你通过添加颜色的名称作为 CSS 类来更改元素的颜色。

HTML

<button class="button" href="#">Primary Action</button>
<button class="secondary button" href="#">Secondary Action</button>

<html>

<head></head>

<body>
  <table class="button button">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Primary Action</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="button secondary button">
    <tbody>
      <tr>
        <td>
          <table>
            <tbody>
              <tr>
                <td><a href="#">Secondary Action</a></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

演示

HTML

<callout class="success">
  <p>Created a new folder. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</callout>
<callout class="alert">
  <p>Error fetching stick. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</callout>

<html>

<head></head>

<body>
  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner success">
          <p>Created a new folder. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>
  <table class="callout">
    <tbody>
      <tr>
        <th class="callout-inner alert">
          <p>Error fetching stick. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </th>
        <th class="expander"></th>
      </tr>
    </tbody>
  </table>
</body>

</html>

演示

响应式断点

与基于网站的 Foundation 不同，基于电子邮件的 Foundation 的 CSS 是优先考虑桌面编写的。这是因为许多较旧的桌面电子邮件客户端不支持媒体查询或 <style> 标记。

你的电子邮件布局在 596 像素时从桌面切换到移动设备。这是容器的宽度加上容器周围间距的宽度。在基金会的 Sass 版本中，你可以通过修改以下变量来更改断点

$global-width：容器的宽度。默认情况下为 580 像素。
$global-gutter：网格间距的宽度。它用作列之间的间距或容器边缘之间的间距。
$global-breakpoint：布局转换时的断点。它将 $global-width 和 $global-gutter 相加的变量。

Sass 引用

变量

此组件的默认样式可以使用项目设置文件中的这些 Sass 变量进行自定义。

名称	类型	默认值	说明
`$primary-color`	颜色	`#2199e8`	链接和按钮等交互组件的主要颜色。
`$secondary-color`	颜色	`#777777`	辅助颜色，用于支持 `.secondary` 类的组件。
`$success-color`	颜色	`#3adb76`	与 `.success` 类一起使用的表示积极状态或动作的颜色。
`$warning-color`	颜色	`#ffae00`	与 `.warning` 类一起使用的表示谨慎状态或动作的颜色。
`$alert-color`	颜色	`#ec5840`	与 `.alert` 类一起使用的表示消极状态或动作的颜色。
`$light-gray`	颜色	`#f3f3f3`	用于 Foundation UI 项浅灰色的颜色。
`$medium-gray`	颜色	`#cacaca`	用于 Foundation UI 项中等灰色的颜色。
`$dark-gray`	颜色	`#8a8a8a`	用于 Foundation UI 项深灰色的颜色。
`$black`	颜色	`#0a0a0a`	用于 Foundation UI 项黑色的颜色。
`$white`	颜色	`#fefefe`	用于 Foundation UI 项白色的颜色。
`$pre-color`	颜色	`#ff6908`	用于代码的颜色。
`$global-width`	数字	`580px`	容器的宽度。
`$global-width-small`	长度	`95%`	小屏幕上的容器宽度。
`$global-gutter`	长度	`16px`	网格元素的间隙。
`$global-gutter-small`	长度	`$global-gutter`	小屏幕中网格元素的间隙。
`$body-background`	长度	`$light-gray`	正文背景色。
`$container-background`	颜色	`$white`	容器背景的颜色。
`$global-padding`	数字	`16px`	全局填充。
`$global-margin`	数字	`16px`	全局外部边距。外部边距要求大写字母“M”，才能在 Outlook.com 中工作。
`$global-radius`	数字	`3px`	边角的全局半径。
`$global-rounded`	数字	`500px`	圆角的全局圆角半径。
`$global-breakpoint`	字符串	`$global-width + $global-gutter`	全局媒体查询，用于从桌面样式切换到移动样式。

全局样式

字体大小

颜色

颜色类

响应式断点

Sass 引用

变量

ZURB 大师班响应式电子邮件

电子邮件基础

想要更多内容？

与我们交谈

保持更新

字体大小

颜色

颜色类

响应式断点

Sass 引用

变量

ZURB 大师班 响应式电子邮件

电子邮件基础

想要更多内容？

与我们交谈

保持更新

ZURB 大师班响应式电子邮件