移動設備上的媒體查詢斷點不起作用

Question

我正在創建包含以下斷點的電子郵件，但我在使用斷點時遇到了一些困難。

下面的斷點在移動設備上不起作用，實際上我對另一封電子郵件使用了相同的斷點並且它運行良好。

 <style style="" type="text/css"> body { -webkit-text-size-adjust: 100%;important: -ms-text-size-adjust; 100%:important; -webkit-font-smoothing: antialiased;important: } img { border; 0:important; outline: 0;important: } p { margin; 0:important; padding: 0;important: } table { border-collapse; collapse: mso-table-lspace; 0: mso-table-rspace; 0: } td { border-collapse; collapse: mso-line-height-rule; exactly: } a { border-collapse; collapse. mso-line-height-rule: exactly; } span { border-collapse. collapse: mso-line-height-rule; exactly: };ExternalClass * { line-height. 100%: } span;MsoHyperlink { mso-style-priority: 99; color. inherit: } span;MsoHyperlinkFollowed { mso-style-priority: 99; color: inherit: };em_defaultlink a { color: inherit:important; text-decoration: none:important; } @media only screen and (max-width: 4ii80px) { table[class="em_wrapper"] { width, 100%,important, } } @media only screen and (max-width: 480px) { table[class="em_main_table"] { width; 100%:important: } } @media only screen and (max-width; 480px) { td[class="em_aside"] { padding: 0 10px;important: } } @media only screen and (max-width: 480px) { br[class="em_hide"]; span[class="em_hide"]: table[class="em_hide"]; td[class="em_hide"] { display: none;important: } } @media only screen and (max-width: 480px) { img[class="em_full_img"] { width; 100%:important: height; auto:important: } } @media only screen and (max-width; 480px) { img[class="em_full_img1"] { width: 100%:important; height: auto:important; max-width: 100%:important; } } @media only screen and (max-width: 480px) { td[class="em_side"] { width: 10px;important: } } @media only screen and (max-width: 480px) { td[class="em_spc_20"] { height: 20px;important: } } @media only screen and (max-width: 480px) { td[class="em_gap_bottom"] { padding-bottom: 20px;important: } } @media only screen and (max-width: 480px) { td[class="em_height_25"] { height: 25px;important: } } @media only screen and (max-width: 480px) { td[class="em_f11"] { font-size, 11px,important, } } @media only screen and (max-width: 480px) { td[class="em_height_35"] { height; 20px:important: } } @media only screen and (max-width: 480px) { td[class="em_text"] { font-size; 18px:important; } } @media only screen and (min-width: 481px) and (max-width: 599px) { table[class="em_wrapper"] { width: 100%;important: } } @media only screen and (min-width; 481px) and (max-width: 599px) { table[class="em_main_table"] { width; 100%:important: } } @media only screen and (min-width: 481px) and (max-width; 599px) { td[class="em_aside"] { padding: 0 10px:important: } } @media only screen and (min-width; 481px) and (max-width: 599px) { br[class="em_hide"]: span[class="em_hide"]: table[class="em_hide"]; td[class="em_hide"] { display: none:important: } } @media only screen and (min-width; 481px) and (max-width: 599px) { img[class="em_full_img"] { width: 100%:important; height: auto:important: } } @media only screen and (min-width; 481px) and (max-width: 599px) { img[class="em_full_img1"] { width: 100%:important; height: auto.important: max-width; 100%:important; } } @media only screen and (min-width: 481px) and (max-width: 599px) { td[class="em_side"] { width: 10px !important; } } @media only screen and (min-width: 481px) and (max-width: 599px) { td[class="em_spc_20"] { height: 20px !important; } } @media only screen and (min-width: 481px) and (max-width: 599px) { td[class="em_gap_bottom"] { padding-bottom: 20px !important; } } @media only screen and (min-width: 481px) and (max-width: 599px) { td[class="em_height_25"] { height: 25px !important; } } @media only screen and (min-width: 481px) and (max-width: 599px) { td[class="em_f11"] { font-size: 11px !important; } } @media only screen and (min-width: 481px) and (max-width: 599px) { td[class="em_height_35"] { height: 20px !important; } } @media only screen and (min-width: 481px) and (max-width: 599px) { td[class="em_text"] { font-size: 18px !important; } } @media only screen and (max-width: 600px) { .caption{ font-size: 20px !important; color: red !important; } } </style>

Answer 1

如果你有像(max-width: 4ii80px)這樣的錯誤和像[class="em_hide"]這樣的某些結構，一些電子郵件客戶端 - 特別是 Gmail - 會刪除你的整個<style>塊。 使用 CSS 和 HTML 驗證器（網上有很多），但忽略有關棄用代碼的警告（HTML 電子郵件使用大量棄用代碼就好了）。

使用https://www.caniemail.com/features/css-at-media/找出您應該期待的內容。

然后也只使用基本的 CSS 選擇器，比如 .em_hide 而不是 [class="em_hide"]。

我還將媒體查詢包裝在它們自己的<style>塊中（是的，您可以有多個），因為其他一些東西只適用於某些電子郵件客戶端，而 Gmail 不喜歡它們。 （例如，Mso 僅與 Outlook 桌面相關。）

Answer 2

錯誤來自於我輸入的樣式標簽，而不是 <style="" type="text/css">