Question

我希望每个表格行最多填充600px，但是当视口小于600px时，表格行将是屏幕宽度的100％。鉴于视口较小，Chrome开发者工具似乎没有任何回复。为什么呢？

<style>

@media only screen and (max-width: 600px) {
    
	table,tr,td {
		width:100%;
		margin:0 0;
	}
	
}

</style>

<table style="max-width:600px;margin:0 auto;width:100%" align="center">
	
		<tr class="test">
			<td style="background-color:red;text-align:center" class="test">
			To view this email as a web page, click <a href="http://cl.exct.net/?qs=fa9cfc6a348d126dc3bf79e0967a225ce97afcb944f78d7e6044adc134e725b0">here.</a>

			</td>
		</tr>
		<tr class="test">
			<td style="background-color:blue;text-align:left" class="test">
			test2
			</td>
		</tr>
		<tr class="test">
			<td class="test">
				<div>
				<img src="http://image.exct.net/lib/fec315777067017a/m/1/share_twitter.jpg" align="right">
				<img src="http://image.exct.net/lib/fec315777067017a/m/1/share_facebook.gif" align="right">
				</div>
			</td>
			
		</tr>
	
</table>

- 更新 -

上面的代码适用于Outlook Mobile，适用于将Chrome窗口大小调整为600px以下，适用于调整大小和开发人员模式的FireFox，适用于调整大小时的IE，但不适用于Chrome Developer Console，模拟设备较少宽度超过600px，并且在我的Android Nexus 6上无效。

Answer 1

添加标签

<meta name="viewport" content="width=device-width, initial-scale=1">

解决了这个问题。

Answer 2

当您使用内联样式时：

<table style="max-width:600px;margin:0 auto;width:100%" align="center">

在您的HTML中，您必须通过向您的CSS添加!important来覆盖它。

这里是您在JSfiddle中工作的代码。我改变的唯一一件事就是将!important标记添加到您的CSS中！

https://jsfiddle.net/pLtb28a1/

请注意，覆盖标记上带有!important标记的唯一方法是在覆盖上使用另一个!important标记。如果你忘了你正在使用它们，它们会使事情变得有点棘手。

媒体查询响应表设计无法响应移动设备

2 个答案: