Question

出于某种原因，我发送电子邮件时我的媒体查询不适用。我将它从Outlook 2007发送到gmail并使用iphone 4s查看它。我尝试使用更简单的@media查询规则发送测试电子邮件（即只更改字体颜色的媒体查询），但这些也不起作用。此外，我尝试从教程中发送演示HTML电子邮件（例如：http://www.netmagazine.com/tutorials/build-responsive-emails），但媒体查询也被忽略了

我在下面附上了我的代码的开头：

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sample</title>
<style type="text/css">
    @media only screen and (max-width: 480px) { 
        table[class="contenttable"] { 
            width:400px !important;
            text-align: left !important;
        }

        table[class="contenttable2"] { 
            width: 382px !important;
            text-align: left !important;
        }

        td[class="changer"] { 
            width:382px !important;
            height: 10px !important;
        }

        td[class="autoalign"] {
            padding: 0 !important;
            text-align: center !important;
        }

        img[class="logo"]  {
            margin-left: -10px !important;
        }

        td[class="autotext"] {
            font-size: 14px !important;
            text-align:left !important;
            height: 70px !important;
        }

        td[class="textresize"] {
            font-size: 8px !important;
        }

        img[class="imgHide"] {
            display:none !important;
            height:0 !important;
            width:0 !important;     
        }
    }
</style>
</head>
<body style="padding:0; margin:0; webkit-text-size-adjust:none;-ms-text-size-adjust: 100%;"> 
<table width="600" border="0" cellpadding="0" cellspacing="0" class="contenttable" align="center" style="font-family: Arial;">

我完全失去了问题所在。任何帮助将不胜感激。

Answer 1

不幸的是，gmail不支持媒体查询（参见http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails），尽管很多人都这样做。你最好的选择是首先设计没有媒体查询，并使用一些常规的CSS来获得堆栈等等，接受你的设计在任何地方看起来都不完美但仍然可以访问的事实。然后，您可以添加一些媒体查询魔术，使其在支持它的每个客户端看起来都很棒。有关这种方法的一个很好的示例，请参阅http://www.zurb.com/article/1119/create-emails-for-any-device-introducing-，有些基本模板可以http://www.zurb.com/playground/responsive-email-templates来启动和运行。

@media查询被忽略了

1 个答案: