HTML電子郵件中的css類和@media規則

我有一個內容表（我的用戶的分數表），它在每個預定時間段內通過電子郵件自動發送出去。HTML電子郵件中的css類和@media規則

該html用於以像素爲單位而不是以百分比表示靜態表格大小和其他測量定義。

我的iPhone和Chrome瀏覽器上的一切看起來都很好，但在Android設備上完全不成比例。

我決定轉換爲響應式佈局，用百分比代替那些。這似乎解決了我的問題，但現在，由於PC和移動設備寬度和高度比的寬度差異，我需要爲PC屏幕和移動\平板電腦屏幕確定不同的分數表寬度。

我知道這可以通過使用@media規則來完成，但問題是CSS的此功能只能用於樣式表中，而不能用於內聯格式化的CSS（在HTML中）。正如你可能知道的，大多數電子郵件客戶端不允許HTML電子郵件中的CSS樣式表（類，CSS選擇器）。

在這種情況下你會建議做什麼？

任何援助非常感謝。

來源

2013-06-02 Oleg Belousov

大多數電子郵件客戶端不允許HTML電子郵件

未鏈接的樣式表，但他們讓你內的headstyle標籤放置樣式中的CSS樣式表（類，CSS選擇器）。是的，有些電子郵件客戶端會刪除這些樣式，但這不是沒有理由不使用它們。現在很多電子郵件客戶端也支持@media規則。對於各種電子郵件客戶端here中有哪些和哪些不支持有很多好的建議。（該網站還有大量經過良好測試並且外觀精美的電子郵件模板。）

由於某些電子郵件客戶端不支持文檔頭部中的樣式，最安全的方法是添加內聯樣式。但是，這不應該阻止您將樣式放置在頭部部分中，例如@media規則 - 可以處理這些樣式的客戶端。

來源

2013-06-02 13:18:17

只是爲了添加到什麼拉爾夫說...

截至去年年底的Gmail成爲最流行的電子郵件客戶端，並剝奪他們整款一封電子郵件中。所以使用內聯是非常重要的。

這是當你的目標不同的電子郵件客戶端 http://www.campaignmonitor.com/css/

這些都是一些有用的黑客我包括每頭式的部分，那裏有不錯的資源

<style> 
/* Force Outlook to provide a "view in browser" button. */ 
body{ width:100% !important; height:100% !important; margin:0; padding:0; background-color: #f8f3eb;} 
.ReadMsgBody{width:100%;} 
.ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */ 
/* Reset Styles */ 
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */ 
</style>

來源

2013-06-09 17:17:54 OneEightLeft

HTML電子郵件中的css類和@media規則

回答

相關問題