首页 文章

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

提问于
浏览 次
0

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

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

.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这样的内置类具有此目的，那将是很好的 .

zurb-foundation zurb-foundation-6 zurb-ink

2 回答

  • 0

    有可见性的内置类 .

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

    To show content only on mobile clients ，将类 .hide-for-large 添加到元素中 .
    To show content only on desktop clients ，将类 .show-for-large 添加到元素中 .

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

    回复于
  • 1

    要覆盖内联样式，您必须使用 !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;
}
    回复于

相关问题