媒體查詢不起作用，使用 Rails premailer

Question

我一直在研究這個問題，但根本沒有找到解決方案。 Gmail（來自桌面的網站）和 Gmail 應用程序中甚至沒有背景顏色。 我嘗試了以下事情。

添加視口
添加屏幕鍵，如 @media screen 和 (max-width) {}。 帶有“only”關鍵字的事件
我已經看到顯示 Gmail 僅支持少數屬性的鏈接（即https://www.caniemail.com/search/?s=media ）。 但這些屬性也不起作用。

所以我需要知道我們是否可以使用媒體查詢？ 所以如果它不起作用，我可以停止使用它。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>
      <%=content_for(:title) %>
    </title>
    <!--[if mso]>
    <noscript>
        <xml>
            <o:OfficeDocumentSettings>
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    </noscript>
    <![endif]-->
    <style>
      @media screen and (max-width: 400px) {
          #root, .upper-bar {
            padding: 0 !important;
          }
          #child-cont {
            border: none !important;
          }
          .upper-bar .slogan-text-cont {
            text-align: center !important;
          }

          .pre-footer-section .steps-icon-cont {
            width: 100% !important;
          }
       }
    </style>

Answer 1

發現 Gmail、Outlook 和類似的郵件提供商對您可以添加多少 CSS 有一些限制。 在該特定限制之后，您的 CSS 將根本無法工作。 所以你已經刪除了一些 CSS。 所以我確實刪除了一些 CSS 並自動我所有的 CSS 和媒體查詢開始工作。 不幸的是，我在任何文章中都找不到這些郵件提供商的任何具體限制。

我發現自己的 Gmail CSS 限制超過了 outlook。 因為當 Gmail 顯示正確的樣式並將相同的郵件發送到 outlook 時，它不起作用。 所以，我進一步減少了樣式內容，然后 CSS 為 Gmail 和 Outlook 工作。

媒體查詢不起作用，使用 Rails premailer

問題描述

1 個解決方案

解決方案1
0 已采納 2022-08-16 09:47:01

媒體查詢不起作用，使用 Rails premailer

問題描述

1 個解決方案

解決方案1 0 已采納 2022-08-16 09:47:01

解決方案1
0 已采納 2022-08-16 09:47:01