媒體查詢電子郵件簽名，可能嗎？

據我所知，html電子郵件中的媒體查詢並未得到廣泛支持，但html電子郵件簽名呢？我已經使用這段代碼的嘗試：媒體查詢電子郵件簽名，可能嗎？

<style type="text/css"> 

    img#banner{display:block !important; 
    } 

    @media (max-width: 450px){ 

    img#banner{display:none !important;} 
    } 

</style>

把它包含用於簽名的內容，在瀏覽器的工作原理我張開臺tag之前，但它似乎並沒有在電子郵件客戶端的工作。我可能做錯了什麼，或者可能根本不支持？我不確定？但是，如果它得到支持，即使只有少數電子郵件客戶端，也值得使用。

編輯：我已經將橫幅的寬度設置爲100％，因爲橫幅圖片太寬，在移動設備上看起來有點醜陋，這個想法是讓它不顯示。

<a class="link" href="http://www.website.com/"> 
    <img id="banner" style="width:100%;" alt="#" src="banner.gif"> 
</a>

編輯2：似乎是兩個重要變量是壞實踐的研究我已經包含在這裏修訂媒體查詢：

<style type="text/css"> 

    img#banner{display:block; 
    } 

    @media (max-width: 450px){ 

    img#banner{display:none;} 
    } 

</style>

雖然實際上這似乎並沒有任何工作更好。我認爲普遍的共識是媒體查詢和電子郵件簽名不會混合。

來源

2013-10-22 bestfriendsforever

僅當您在標頭內指定設備寬度時，媒體查詢纔有效。 – Romain

是的，我已經設置了標題的寬度爲100％，所以這應該工作。我只是希望橫幅不會顯示在移動設備上，因爲它太小了。 – bestfriendsforever

不幸的是，我不認爲你可以在電子郵件中使用媒體查詢。 Here is a link

但是，你仍然可以在修改HTML和CSS可能覆蓋以居中爲每個設備上的形象。

要縮放背景圖像以適合DIV中：

background-size: contain;

要縮放背景圖像覆蓋整個DIV：

background-size: cover;

來源

2013-10-22 09:24:27 Romain

感謝您的鏈接！本文得出的結論是，iPhone和iPad的郵件，媒體查詢工作。儘管從我的測試來看，這似乎並不正確。據我可以告訴我的媒體查詢是正確的，很簡單。 ps：謝謝你的背景大小提示，儘管我不認爲這會對我想要達到的效果有所幫助。 – bestfriendsforever

您是否嘗試刪除！重要標籤？注意：你的代碼不能在gmail上工作 – Romain

使用媒體查詢還有另一個重要的因素，它是「你如何發送電子郵件」。如果我通過Safari發送電子郵件作爲電子郵件，媒體查詢將保持不變;如果我從營銷活動工具（如cakemail）發送相同的HTML代碼，則媒體查詢會發生變化並停止工作，可能會破壞佈局。現在，電子郵件媒體查詢不夠標準，我建議使用％寬度進行佈局。瀏覽器明智，這會讓你感到驚訝，outlook.com是渲染響應電子郵件的最佳選擇。雅虎郵件嘗試這是最好的，但需要一些黑客在您的查詢。 –

刪除!important規則在您的第一個樣式display:block; 。有兩個對頭往往意想不到的結果。

來源

2013-10-22 18:50:46 zazzyzeph

你也應該內聯'display：block;'因爲gmail剝離了所有樣式標籤。 – zazzyzeph

媒體查詢電子郵件簽名，可能嗎？

回答

相關問題