響應式電子郵件圖像

我想在電子郵件時事通訊中實現響應式圖像，例如，手機。爲此，我使用此代碼段從templates.mailchimp.com並將其插入到上面的圖片我想改變身體：響應式電子郵件圖像

<style type="text/css"> 
@media only screen and (max-width: 480px){ 
    .emailImage { 
     height:auto !important; 
     max-width:600px !important; 
     width: 100% !important; 
    } 
} 
</style>

因爲我想成爲的畫面響應我添加了類=」 emailImage 」。現在可悲的是，這是行不通的。任何人都可以解釋爲什麼或爲我的問題提供更好的解決方案如果需要，這裏是我的通訊的完整代碼：http://pastebin.de/39651？

感謝

來源

2014-02-05 user3275368

如果幸運的話，這種功能將在2028年初由電子郵件客戶端支持。請參閱[電子郵件中的CSS類]（http://stackoverflow.com/q/4466439） –

另請參閱http： //www.campaignmonitor.com/css/瞭解哪些客戶端支持哪些功能 –

電子郵件作爲HTML不支持CSS的（至少不是所有的電子郵件客戶端支持此功能還）。您必須使用老派的HTML內容，例如<img src="some-URL.png" width="100" height="200">

順便說一句，您也可以嘗試在HTML標記本身上使用內聯style屬性。它可能適用於某些電子郵件客戶端。

Check out this post for "best-practices" with emails and HTMLs

來源

2014-02-05 13:57:57

我不明白，爲什麼都支持您的回答，但這是錯誤的！在這個例子中，他在媒體查詢部分使用樣式進行響應式設計，這將適用於移動電子郵件客戶端 –

@SlawaEremkin問題不在於CSS規則或媒體查詢。我的觀點是，大多數電子郵件客戶端，甚至谷歌的Gmail，都會忽略鏈接到HTML的樣式部分或文件。因此，如果適合，我的解決方案是使用舊的HTML樣式屬性或使用內聯style屬性。我還提到其他文章，其中總結了這個問題很好。 –

試試這個：我用我的通訊

<style type="text/css"> 
@media screen and (max-width: 480px){ 
    img[class="emailImage"] { 
     width: 100% !important; 
    } 
} 
</style> 

<img class="emailImage" src="path/to/img" style="width: 600px; height:auto;" width="600">

這是相同的代碼，它工作正常。 ~~稍後我會更新我的答案，當我找到引用爲什麼這種特定的樣式的方式是必要的，以及對於什麼郵件客戶端，自從我執行該代碼以來已經有一段時間了。~~

UPDATE：利用內幕媒體查詢屬性選擇是解決方法Yahoo mail bug賦予優先級裏面內嵌了那些媒體查詢樣式。

跨郵件客戶端的最大寬度支持是pretty limited因此更安全的方法是將圖像寬度指定爲內聯樣式（使用!important在MQ中獲得高位）。由於高度始終是自動的，因此可以直接定義爲內聯。僅當某些郵件客戶決定忽略或去除內聯樣式時，全局屬性纔會用作最終回退。

而且，（有點）複雜的郵件佈局的形象元素將可能是一些表內的在這種情況下表元素必須也有相同的屬性的內聯和內部媒體查詢它來響應。

有用的鏈接：CSS support across mail clients

來源

2014-02-05 14:14:22

-1

大多數電子郵件客戶端對CSS的支持可怕。大多數客戶都會去掉你的電子郵件模板，所以你不應該在那裏包含重要的CSS。也可能是某些客戶從電子郵件中剝離了類名，或者重新格式化了它們，或者拒絕瞭解媒體查詢或其他各種可能的問題。

解決方案是簡單地在每個元素上內聯編寫所有CSS。定期max-width: 100%和height: auto應該足夠。

有跡象表明，轉換外部設定的風格和類名來內聯樣式的工具。這確實會阻止您使用媒體查詢，因此請確保您不依賴它們來呈現您的電子郵件。

編輯：既然你似乎可以用Mailchimp，看看their article on CSS in HTML emails。

來源

2014-02-05 14:17:12

只是爲您的關注，請閱讀這篇文章：http://www.campaignmonitor.com/guides/mobile/ –

@SlawaEremkin這與這個答案有什麼關係？ –

響應式電子郵件圖像

回答

相關問題