可見度類別
針對不同螢幕大小有選擇性地顯示內容。
可見度類別讓您控制在哪些螢幕大小上顯示哪些內容。
Foundation for Emails 有兩個斷點：small，指寬度小於 596 像素的任何電子郵件用戶端，以及large，指寬度大於 596 像素的任何用戶端。這表示 small 通常與行動裝置用戶端相關，而 large 則與桌上型電腦用戶端相關。
由於 Outlook 缺乏對特定 CSS 屬性的支援，Foundation for Emails 的可見度類別應與條件式註解搭配使用，以確保內容在 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>示範
