Question

经过几天努力编写响应式电子邮件并尝试在整个网络上找到答案后，我的媒体查询未被移动设备使用，我将其与现成的响应式模板进行了比较，测试，测试并再次使用不同的测试配置...但它仍然没有在这里工作是我的标题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <style type="text/css">

        table[class=w600], td[class=w600] {width: 600px!important;}
        body,table,td,p,a,li,blockquote{-webkit-text-size-adjust:none !important;}

        @media only screen and (max-width: 599px), only screen and (max-device-width: 599px) {

            table[class=w600], td[class=w600] {width: 480px!important;}
        }
        @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
            table[class=w600], td[class=w600] {width: 320px!important;}
            p[class=for-pro], a[class=view-in] {font-size: 10px!important;}
            p[class=bottom] {font-size: 12px!important;}
            p[class=frank] {font-size: 16px!important;}
        }
    </style>
</head>

我错过了什么吗？什么是魔法＆＃39;我需要写的东西才能让它有效，因为它实际上是一个非常简单的新闻通讯，你可以看到，只有很少的css规则可以遵循。

谢谢。

Answer 1

一些事情：1。您正在测试哪些浏览器/客户端？内部监督办公室将作出回应;但是，Android的原生应用不支持（Android 4.4）。 2.不要使用h1，h2 ,. 。。 p标签。他们根据电子邮件客户端的不同反应。将所有样式应用于包含<td>。

这是我开始使用的大多数单列电子邮件的默认头。它可以解决你在雅虎，ios和Outlook上遇到的许多黑客攻击。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>One Column Mobile Friendly Template</title>

<style>
/*------------------------------------*\
   EMAIL CLIENT SPECIFIC STYLES
\*------------------------------------*/
.ReadMsgBody, .ExternalClass { width:100%; } /* Force Hotmail/Outlook.com to display emails at full width */  
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; } /* Force Hotmail/Outlook.com to display normal line spacing */
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* Prevent WebKit and Windows mobile from changing default text sizes */
table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } /* Removes spacing between tables in Outlook 2007 and up */
img { -ms-interpolation-mode:bicubic; } /* Allows smoother rendering of resized images in Internet Explorer */
.footer a { color:/*#ffffff*/; text-decoration:none; } /* Add this class to the system footer to change the unsubscribe link ---does not work for Gmail--- */
.iOSfix a { color:/*#ffffff*/; text-decoration:none; } /* Override the default blue link style that iOS puts on address and phone numbers */
.iOSfixaside a { color:/*#000000*/; text-decoration:none; } /* Alternate Style - Override the default blue link style that iOS puts on address and phone numbers */
.em-dragdrop-dummy { display:none!important; }

/*------------------------------------*\
   RESET STYLES
\*------------------------------------*/
body { min-width:100% !important; }
html { width:100%; }
img { border:0; height:auto; line-height:100%; outline:none; text-decoration:none; }
table { border-collapse:collapse !important; }
body, .emWrapperTable, .emWrapperCell { height:100% !important; margin:0; padding:0; }  
.mobileHeaderWidth .em-dockitem-empty, .mobileFooterWidth .em-dockitem-empty, .emWrapperTable, .emWrapperCell { width:100% !important; }
div { padding:0px !important; }
h1, h2, h3, h4, h5, h6 { display:block; margin:0px; }

/*------------------------------------*\
   MOBILE STYLES
\*------------------------------------*/    
@media only screen and (max-device-width: 720px)  {
    td[class="mobileHeaderCell"],
    td[class="mobileColumnCell"],
    td[class="mobileFooterCell"] { display:block !important; }
    table[class="mobileHeaderWidth"],
    table[class="mobileColumnWidth"],
    table[class="mobileFooterWidth"],
    td[class="mobileHeaderCell"],
    td[class="mobileColumnCell"],
    td[class="mobileFooterCell"] {width:480px!important;}

    /* general display styles */
    td {box-sizing:border-box; }
    span[class="mHide"] { display:none!important; }
    span[class="mBreak"] { display:block!important; }
    p[class="mCenter"] { text-align:center!important; margin:0px 1em!important; }

    /* link styles */

    /* image styles */
    img[class="mFullImage"] { width:100%!important; height:auto!important; }
    img[class="mImgCenter"] { margin:0px auto!important; }
}

@media only screen and (max-device-width: 479px) {
    table[class="mobileHeaderWidth"],
    table[class="mobileColumnWidth"],
    table[class="mobileFooterWidth"],
    td[class="mobileHeaderCell"],
    td[class="mobileColumnCell"],
    td[class="mobileFooterCell"] { width:320px!important; }

    /* general display styles */

    /* link styles */

    /* image styles */
}       
</style>

</head>

Answer 2

并非所有移动设备或移动应用都支持响应式和媒体查询。例如Android或Gmail应用程序不会获胜。有一些解决方法。特别是要让它在Android上运行并强制它在Gmail上呈现桌面。您可以在此处找到适用于Android的解决方案： How to get a responsive HTML email to work on Android?

记住这一点，关于媒体查询，您可以尝试以这种方式设置它们：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
     <style type="text/css"> 
     @media only screen and (max-width: 500px) {
       *[class].classname{width:100% !important;}
       *[class].classname{float:left !important;}
       *[class].classname{display:block !important;}
     }
     </style>
    </head>

在此完全解释： How to code a responsive HTML email table step by step – tutorial

响应电子邮件问题

2 个答案: