僅在HTML電子郵件中爲桌面客戶端指定CSS

我試圖包含僅影響桌面電子郵件客戶端而不是移動電子郵件客戶端的CSS。僅在HTML電子郵件中爲桌面客戶端指定CSS

在下面的示例中，我已經爲所有客戶端添加了CSS，然後試圖用CSS聲明覆蓋僅用於最大寬度爲480px媒體查詢的移動客戶端的CSS聲明。

我也嘗試過使用@media screen and (min-width: 800px)，但這似乎被我們測試的所有電子郵件客戶端忽略。

然而，當我測試的石蕊的電子郵件的所有電子郵件客戶端，甚至是基於桌面的，被顯示在100％的寬度表，而不是500像素

table[id="socialTbl"] { 
    width: 500px !important; 
    max-width: 500px !important; 
} 

table[id="locations"] { 
    width: 500px !important; 
    max-width: 500px !important; 
} 



/* Desktops and laptops ----------- */ 
@media only screen 
and (max-width : 480px) { 
/* Styles */ 

table[id="socialTbl"] { 
    width: 100% !important; 
    max-width: 100% !important; 
} 

table[id="locations"] { 
    width: 100% !important; 
    max-width: 100% !important; 
} 
}

來源

2012-09-29 jsuissa

爲您的桌面客戶端，所有CSS需要內聯，媒體查詢只適用於您的移動設備。

這是從廣告活動監控過程中一個真正偉大的概述 - http://www.campaignmonitor.com/guides/mobile/

來源

2012-10-03 13:43:17 samanthasquared

沒錯，與HTML郵件，你設計的桌面一（這些是愚蠢的客戶），並添加（有限）CSS移動。覆蓋範圍遍佈全境，像石蕊等服務提供設備測試，但我也經常在同事的設備上進行測試。要特別注意黑莓：在企業界高度擴散的愚蠢客戶。 – aaandre

僅在HTML電子郵件中爲桌面客戶端指定CSS

回答

相關問題