与基金会仅限移动网的电子邮件（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

有内置的可见性类。

从基金会的电子邮件文档。 http://foundation.zurb.com/emails/docs/visibility.html

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

注 - .hide-for-large不支持Gmail和雅虎的电子邮件客户端。

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