zurb-foundation - 带有 Foundation for Emails (Zurb) 的仅移动网格

Question

我试图在桌面上查看列或行时隐藏它，并且只在移动设备上显示，反之亦然。

有谁知道这是否可能？我试图实现以下类，但它似乎不适用于标签。

.mobile-only {display:none;}
.desktop-only {display:block;}

@media only screen and (max-width: 596px) {

.mobile-only {display:block;}
.desktop-only {display:none;}

}

如果有像 small-0 或 large-0 这样的内置类具有此目的，那就太好了。

Answer 1

有内置的可见性类。

来自 Foundation for Email 文档。http://foundation.zurb.com/emails/docs/visibility.html

要仅在移动客户端上显示内容，请将类添加.hide-for-large到元素。
要仅在桌面客户端上显示内容，请将类添加.show-for-large到元素。

注意 - .hide-for-largeGmail 和 Yahoo 电子邮件客户端不支持。

Answer 2

要覆盖内联样式，您必须使用!important.

@media only screen and (max-width: 596px) {
  .mobile-only {display: block !important;}
  .desktop-only {display: none !important;}
}

如果您所针对的所有客户端均不支持此解决方案，请尝试：

.example {
  width: 0px; 
  height: 0px; 
  color: transparent; 
  line-height: 0; 
  overflow: hidden; 
  font-size: 0px; 
  display: none !important; 
  visibility: hidden; 
  opacity: 0; 
  mso-hide: all;
}