可见性类
有选择性地显示不同屏幕尺寸的内容。
可视性类允许您控制显示在哪个屏幕尺寸上的内容。
用于电子邮件的 Foundation 有两个断点：小型（宽度小于 596 个像素的任意电子邮件客户端）和大型（大于 596 个像素的任意客户端）。这意味着小型通常与移动客户端相关，而大型与桌面客户端相关。
由于 Outlook 缺少对某些 CSS 属性的支持，因此用于电子邮件的 Foundation 可见性类应与条件注释结合使用，以确保内容 在 Outlook 2007、2010、2013 和 2016 中以适当的方式隐藏（或显示）。例如，为了在 MS Outlook 及从 MS Outlook 转发的电子邮件中隐藏一个元素，请确保使用 <!--[if !mso]><!--> 和 <!--<![endif]--> 条件格式 包装该元素。
如果您对图像使用可见性类，请务必将其应用于父元素，而不是图像本身。
仅在移动客户端上显示内容，将类 .hide-for-large 添加到包裹需要隐藏的元素的 div 中。
仅在桌面客户端上显示内容，将类 .show-for-large 添加到元素中。
HTML
<!--[if !mso]><!-->
<div class="hide-for-large">
<callout class="primary">
<p>This callout will only appear on small screens.</p>
</callout>
</div>
<!--<![endif]-->
<callout class="show-for-large alert">
<p>This callout will only appear on large screens.</p>
</callout><!--[if !mso]><!-->
<html>
<head></head>
<body>
<div class="hide-for-large">
<table class="callout">
<tbody>
<tr>
<th class="callout-inner primary">
<p>This callout will only appear on small screens.</p>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</div>
<!--<![endif]-->
<table class="callout">
<tbody>
<tr>
<th class="callout-inner show-for-large alert">
<p>This callout will only appear on large screens.</p>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</body>
</html>演示
