Question

尝试为我的电子邮件源代码创建一个媒体查询，当用户的屏幕尺寸变小时，该源代码将扩大字体大小。这是我的媒体查询：

<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
.txtWidth {margin: 0 90px}
body     {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: arial, helvetica, sans-serif;}
table {border-collapse: collapse;}

@media only screen and (max-width: 600px)  {
                body[yahoo] .deviceWidth {width:440px!important; padding:0;}
                body[yahoo] .center {text-align: center!important;}
                img.deviceWidth.img {width: 150px!important}
                /*p.ContentWidth {padding: 0 20px!important}*/
        }

@media only screen and (max-width: 479px) {
                body[yahoo] .deviceWidth {width:280px!important; padding:0;}
                body[yahoo] .center {text-align: center!important;}
                img.deviceWidth.img {width: 130px!important}
                .txtWidth {margin: 0 0!important}
                .sig {padding: 0 0 0 40px!important; width: 100px!important}
                p {font-size: 120%}
        }
</style>
</head>

这似乎使字体正确缩放，但是当我实现这一点时，我在电子邮件中进一步丢失了很多格式。具体来说，这一部分一切都突然失去了它的中心，变得左倾齐齐，我不知道为什么。

<table>
<tbody>
<!-- / Cut out of the main bulk of email code here -->
<tr>
<td colspan="2" style="margin: 0px 10px 0px 10px; text-align:center;">
<img src="http://images.gv-c.com/354/Images/12/qbp.png" />
</td>
</tr>
<tr>
<td colspan="2" style="margin: 0px 10px 0px 10px;">
<p style="margin: 5px 10px 10px 10px; text-align: center;">011-28 00 00 &bull; <a href="mailto:info@qstar.se">info@qstar.se</a> &bull; <a href="http://www.qstar.se">www.qstar.se</a></p>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 0px;" valign="top">
<img src="http://images.gv-c.com/354/Images/13/sidfot2.png" style="border-width: 0px; border-style: solid;" width="600" />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" class="center" colspan="2" style="text-align: center; vertical-align: middle;"><span style="font-size:10px;">Du f&aring;r detta mail f&ouml;r att du har registrerat dig f&ouml;r &rdquo;Qstar Mailkvitto&rdquo;. Du har f&aring;tt detta mail till&nbsp;[DATA:EMAIL_ADDRESS].</span>
<br />
<span style="font-size: 10px;">[LINK:UNSUBSCRIBE=Klicka h&auml;r f&ouml;r att avregistrera dig fr&aring;n denna e-post-lista med erbjudanden och information fr&aring;n Qstar F&ouml;rs&auml;ljning AB]</span></td>
</tr>
</tbody>
</table>

为什么会这样？方括号表示电子邮件营销平台填充的可变字段，我看不到任何其他潜在问题。它定义与媒体查询有关，因为当我取出“p {font-size：120％}”行时，所有样式功能都正常。

媒体查询可缩放字体大小打破文本对齐样式？

0 个答案: