如何使用@Media查詢
[英]How to use @Media queries
問題描述
我正在創建一個電子郵件模板，但現在嘗試使其響應，我遇到了一個問題，我一直在考慮使用"@media"標簽，但是電子郵件並不真的喜歡<style>所以我真的不確定該怎么做。
<body>
<table>
<table>
<tr>
<td>
text blah blah
</td>
</tr>
</table>
<!-- This is the one I was responsive (The one below) -->
<table>
<tr>
<td>
Make this table responsive <3
</td>
</tr>
</table>
</table>
</body>
PS，我不需要頂部進行響應，所以如何將第二個鏈接到CSS
我的所有表格和桌面設計看起來都很完美，例如div和表格是'％'而不是'px'，並且當它縮小到移動設備時，我彼此相鄰有2個div，它們仍占瀏覽器的50％屏幕（50％的移動設備和台式機屏幕），但當它們按比例縮小時，我希望它們成為100％的移動屏幕
5 個解決方案
解決方案1
2 已采納 2015-07-29 13:45:05
<head>
<style>
@media only screen and (max-width: 771px) {
/*add your class and code here*/
}
</style>
</head>
解決方案2
0 2015-07-29 13:47:57
解決方案3
0 2015-07-29 13:48:05
在HTML電子郵件中，由於無法使用單獨的樣式表，因此您可以通過兩種方式進行所有樣式設置。
第一個是<style>標記。 您的電子郵件將具有<html> -> <head> -> <body> 。
<style>標簽只能放在頭部，因此您的設置應如下所示。
<html>
<head>
<style>
@media screen only (max-width:767px){
/* Your CSS goes here */
}
</style>
</head>
<body>
/*HTML Code goes here */
</body>
</html>
您擁有的另一個選項僅在您只想更改寬度時才有效，並且將在元素的內聯樣式中使用百分比，如下所示：
<div class="header-block" style="width:100%;"></div>
您可以在litmus.com的電子郵件中找到有關使用媒體查詢的更多信息 。
如果您已經在樣式標簽中添加了額外的CSS來構成它，則內聯樣式器工具可能可以幫助您將嵌入式樣式轉換為內聯。
解決方案4
0 2015-07-29 15:17:54
有兩種使用媒體查詢的方法-移動優先或桌面優先。
對於剛接觸HTML CSS的人來說，擁有最多支持並且可能最容易的方法是桌面優先方法。 在此，您將內嵌桌面渲染的所有樣式。 然后，您可以為不同的斷點添加媒體查詢，以使電子郵件適合設備屏幕。 這是最簡單的方法，並且獲得最多的支持，因為只有真正不支持媒體查詢的移動電子郵件客戶端才是Gmail應用程序（通常只占您的移動受眾的一小部分）。 問題是，以Gmail應用程序為例，具體取決於您對電子郵件的樣式設置，這可能導致其在Gmail應用程序上中斷，從而導致顯示問題。
這就是移動優先方法的用武之地。移動首先構建具有內聯樣式的電子郵件，以在gmail應用程序中正確顯示，然后使用媒體查詢和mso條件語句使其充實並正確填充在桌面顯示器上。 這需要更多有關CSS和電子郵件客戶端“怪癖和黑客”的知識，但可以創建在所有客戶端上都能完美顯示的電子郵件。 由於電子郵件客戶端中不同處理器的復雜性，有時這可能需要更多的樣式和更多的代碼才能完成。
對於初次嘗試，我建議首先像以前一樣始終將桌面構建為桌面，然后將媒體查詢用於移動設備，因為它簡單易行，並且得到了更廣泛的支持，因此需要更少的黑客攻擊。
有關支持CSS的幫助，請參考-http: //www.campaignmonitor.com/css
希望此信息對您有所幫助。
參考文獻：
石蕊-https: //litmus.com/blog/understanding-media-queries-in-html-email
用酸發送電子郵件-https: //www.emailonacid.com/blog/article/email-development/media_queries_in_html_emails
CampaignMonitor- https://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/
解決方案5
-1 2015-07-29 13:51:48
已經完成並使用並嘗試它在表結構內的Media中未使用
<table width="600px" max-width="100%" align="center">
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
<tr><td>content......</td><td>content....</td></tr>
</table>
如何在 flexbox 中使用媒體查詢？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.