用媒體查詢替換圖像響應電子郵件

Question

我試圖編寫響應電子郵件，以便當用戶的分辨率低於480px時，我們隱藏大圖像並用較小的背景圖像替換它們。但是，事實證明，背景圖像不會顯示在移動設備或桌面上。那麼在響應電子郵件中替換大圖像以更小圖像的方法是什麼？

謝謝！

Answer 1

實際上，如果可能的話，您的設計仍然需要「工作」且缺少背景圖像。

Outlook（我的意思是桌面應用程序而不是Outlook.com，Hotmail的替代品）幾乎是最糟糕的電子郵件客戶端，它支持各種基本的HTML/CSS功能 - Campaign Monitor CSS compatibility chart - 以及更現代的像媒體查詢的東西 - 這是因爲Outlook 2007,2010甚至2013版本都使用微軟Word渲染引擎...

有is a VML-based background image hack但它是非常可怕的，不保證工作 - 我不會推薦。

很明顯，您需要考慮電子郵件廣告系列的受衆羣體，但是除非您有客戶需要Outlook支持（儘管您可以嘗試解釋這種情況），但我更感覺Outlook是'點擊此處if這封電子郵件在您的瀏覽器中無法正確顯示「您的郵件頂部的鏈接是爲了 - 我會檢查正文文本在Outlook中可讀，但坦率地說，不要擔心太多其他問題，請專注於在mobile clients that do allow media-queries中正確填寫。