电子邮件的基础知识：为小型设备隐藏一些容器

Question

[当我还是questioning on Stackoverflow时，如何使用mjml.io解决我的问题，经过一些研究后，我发现还有ZURB Foundation emails应该可以在Outlook 2003上完美运行（如其网站上所述）。因此，我尝试创建与对此MJML.io Tryout page相同的行为。我的问题是：我只在CSS中看到show-for-large和hide-for large。但是我看不到会出现show-for-small和hide-for-small ....

的任何内容

<container class="show-for-large">
  <row>
    <columns  >
      <img src="http://c64os.com/resources/c64c-system.jpg">
    </columns>

  </row>
</container>

<container class="hide-for-large">
  <row>
    <columns>
      <img src="https://www.ecom-ex.com/fileadmin/user_upload/images/products/one-pager/gallery/ex-handy_10_dz1dz2/ex-handy_10_dz1_teaser_1.png">
    </columns>

  </row>
</container>

它适用于台式机，但适用于移动设备，它同时显示:-(

Answer 1

基础电子邮件中只有一个断点$global-breakpoint（$global-width + $global-gutter）（请参阅https://github.com/foundation/foundation-emails/blob/2474651b1de029aea9f5830e95842753bf0242e3/scss/settings/_settings.scss#L40）。

[show-for-large与hide-for-small相同，hide-for-large与show-for-small相同（关于逻辑）。

如果需要这些类，则需要添加/创建自己的帮助器类，因为我们仅提供使用$global-breakpoint的类。

请参见https://github.com/foundation/foundation-emails/blob/develop/scss/components/_visibility.scss