與基金會僅限移動網的電子郵件（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; 
}