Question

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

任何人都知道这是否可行？我试图实现以下类，但它似乎不适用于标记。

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

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

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

}

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

Answer 1

内置了可见性类。

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

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

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

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;
}

仅限移动网格，带有电子邮件基金会（Zurb）

2 个答案: