媒體查詢不適用於電子郵件

Question

我正在嘗試編寫響應式設計電子郵件-我在這里進行了梳理，找不到任何有幫助的東西。 我真的沒有看到@media查詢的任何部分通過-圖片保持在我在@media查詢中編碼的大小，並且沒有在瀏覽器中重新調整大小。 我編碼的字體的移動樣式也不固定。 這是一些代碼：

<style type"text/css">
body {background-color: #e5e5e5}
p {
    font-size: 13px; 
    font-family: verdana; 
    line-height: 21px;
    color:#4B5460;
     }
a {
    font-family: verdana; 
    font-weight: bold; 
    text-decoration: underline; 
    color: #4B5460;
}
.footer_link {
    font-weight: normal;
    text-decoration: none;
    color:#0c5bba;
    font-size: 11px;
}

@media screen and (max-width:480px) {
    .graf_font {
        font-size: 16px;}
    }
    .reg_button {
        max-width:200px;
    }
    .mobile_hide {
        display: none;
    }
    .chiclets {
        max-width: 100px;
    }
    .snapshot {
        max-width:75px;
    }
}
</style>

讓我知道您是否需要更多代碼-我是一個初學者，所以我知道我缺少明顯的東西！

謝謝！

Answer 1

好像您有一個額外的結束括號。

.graf_font {
    font-size: 16px;} /* <-- remove this bracket */
}

還要檢查以確保您的電子郵件客戶端甚至支持媒體查詢。 https://litmus.com/help/email-clients/media-query-support/

Answer 2

電子郵件不完全支持最大寬度。 我發現使用百分比是一種有用的替代方法（例如，寬度= 80％）。 如果您可以使圖像占據移動圖像上屏幕或表格單元的一定百分比，而不是占據特定的像素寬度，則可能會更成功。 如果仍然沒有成功，請嘗試在CSS之后添加！important。

另外，您將需要內聯樣式化文本，因為很多文本將被不同的電子郵件客戶端剝離。

我還建議您查看https://litmus.com/community 。 它是一個新的免費資源，其中包含有關電子郵件設計的最新信息，並且比我更了解電子郵件設計的人。