HTML電子郵件移動響應

我已經創建和HTML電子郵件，它都可以正常工作，但有一些地方我使用內聯css（padding：0 36px 15px 140px）在文本前有一個空白部分。這在桌面上看起來很不錯，但是當我在移動設備上打開它時，長行顯示爲兩行，因爲左側的140px填充對於它們來說太大了。我該如何解決這個問題？HTML電子郵件移動響應

這是我到目前爲止已經試過：

<style type="text/css"> 


    @media screen and (max-width: 525px) { 


    .smaller { 
     padding: 0px 36px 15px 100px; 
    }

<td style="padding: 0px 36px 15px 140px; font-size: 16; font-family: Helvetica; font-weight: bold;" class="smaller">

所以我聲明瞭一個媒體查詢爲較小的設備，然後我嘗試這適用於類，但填充不會改變。我怎樣才能做到這一點？風格在頭上，我可以把它放在別的地方嗎？

來源

2016-10-08 dmbdnr

是的。做電子郵件時應該沒有什麼頭腦。把它全部內聯。 –

您的電子郵件代碼不適用於哪些電子郵件客戶端？它在_any_客戶端中工作嗎？ –

嘗試添加!important，即覆蓋您inline-style

@media screen and (max-width: 525px) { 

    .smaller { 
     padding: 0px 36px 15px 100px !important; 
    } 
}

來源

2016-10-08 17:39:35 aldanux

nope，它不起作用：/ – dmbdnr

覆蓋用！重要指示的繼承。

https://www.w3.org/wiki/Inheritance_and_cascade

.smaller { 
    padding: 0px 36px 15px 100px !important; 
}

編輯：我看到我在畫慢......好吧，你確定你關閉你的風格標籤？（有時它是顯而易見的東西......總是發生在我身上）。

來源

2016-10-08 17:44:20

@Micheal Allison是的，我確實關閉它。！重要的似乎不起作用 – dmbdnr

你是否在其他風格之後調用這種新風格？就像你的主要CSS文件一樣？也許它被覆蓋。 –

在我的html文件中，所有內容都是內聯的，就像你在上面的例子中看到的那樣。所以我想我是這樣做的，通過把class =「smaller」放在最後 – dmbdnr

HTML電子郵件移動響應

回答

相關問題