3

出于某种原因，当我发送电子邮件时，我的媒体查询不适用。我将它从 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;">

我完全不知道问题是什么。任何帮助将不胜感激。

4

1 回答 1

6

不幸的是，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一些基本模板，让您启动和运行。

于 2013-04-05T08:25:39.730 回答