Question

我正在尝试使用电子邮件的媒体查询创建响应式双列行（在表格中）。使用table align method from Mailchimp，它在桌面和Android上看起来很棒。在iPhone上，媒体查询告诉“templatecolumnContainer”在480px下显示100％宽度的屏幕，但它只填充50％。另一个列容器确实包裹在图像下方并拉伸视口的宽度。

这是媒体查询 -

@media only screen and (max-width: 480px) { 
.templateColumnContainer2 {
      display: block !important; 
      width:100% !important; 
      margin-left: auto !important; 
      margin-right: auto !important;
    } 
}

这是两列 -

    <table align="center" border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: inline-block !important;padding-bottom: 15px;" width="750">
    <tbody>
        <tr>
            <td align="center" valign="top">
                <table align="left" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
                    <tbody>
                        <tr>
                            <td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
                                <img class="columnImage" src="image.jpg">
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table align="right" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
                    <tbody>
                        <tr>
                            <td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;" valign="top">
                                <h3 style="color: #606060 !important; display: inline; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
                                <p>Some paragraph text</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

如果有人能填写我省略的任何编码差距，我将永远感激不尽！提前谢谢。

Answer 1

这应该按照你的要求行事：

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<style>
	@media screen and (max-width: 750px) {
		#templateColumns {
			width: 100% !important;
		}
		.templateColumnContainer2 {
			display: block !important;
			width: 100% !important;
			max-width: 100% !important;
		} 
	} 
</style>
</head>

<body width="100%" style="Margin: 0;">
    <center style="width: 100%;">
		<table cellspacing="0" cellpadding="0" border="0" align="center" width="750" style="margin: auto;" id="templateColumns">
			<tr>
				<td class="templateColumnContainer2" width="50%" valign="top">
					<table cellspacing="0" cellpadding="0" border="0" width="100%">
						<tr>
							<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
								<img class="columnImage" src="image.jpg" width="100%" height="auto">
							</td>
						</tr>
					</table>
				</td>
				<td class="templateColumnContainer2" width="50%" valign="top">
					<table cellspacing="0" cellpadding="0" border="0" width="100%">
						<tr>
							<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;">
								<h3 style="color: #606060 !important; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
								<p>Some paragraph text</p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</center>
</body>
</html>

＆＃13;

我不确定您上面有哪些父HTML，但我包含了<body>和<center>，并略微重写了<table>标记+类以实现响应视口低于<table>桌面宽度750px时堆叠的布局。

两列响应电子邮件媒体查询 - iPhone不显示表格全宽

1 个答案: