在HTML電子郵件中使用媒體查詢切換圖像不起作用

我試圖在HTML電子郵件中使用媒體查詢切換圖像，但某些版本的Outlook只顯示兩個圖像。這裏是我的代碼一個簡單的版本：在HTML電子郵件中使用媒體查詢切換圖像不起作用

<html> 
<head> 

<style type="text/css"> 

*[class].image { 
    max-width: 100% !important; 
    height: auto; 
} 

.headermobile{ 
    display: none;} 

@media only screen and (max-width: 450px){ 
    .headerdesktop{ 
    display: none; 
    } 

    .headermobile{ 
    display: block; 
    } 
} 

</style> 

</head> 
<body> 

<table> 
<tr> 
<td> 

<!-- DESKTOP --> 

<img src="desktop.png" class="headerdesktop image"> 

<!-- MOBILE --> 

<img src="mobile.png" class="headermobile image"> 

</td> 
</tr> 
</table> 

</body> 
</html>

它似乎在移動設備上正常的工作，但我不知道我失蹤了桌面。

來源

2017-02-09 Heather Durante

哪些版本的Outlook？你有沒有檢查過這些版本是否支持媒體查詢？ – ezekielDFM

請試試這個：

<!--[if !mso]><!-- --> 
    <img src="mobile.png" class="headermobile image" style="mso-hide:all;"> 
<!--<![endif]-->

將代碼作爲條件對所有的電子郵件客戶端除了outook將意味着圖像隱藏將是僅依賴於媒體的質疑。我也爲圖片添加了一種風格。

還有一種方法需要多一點代碼，如果這部分不起作用，我會給你。

請讓我知道這是否工作。

乾杯

來源

2017-02-12 21:10:58 Syfer

在HTML電子郵件中使用媒體查詢切換圖像不起作用

回答

相關問題