媒体查询响应式表格设计不响应移动设备

Question

我希望每个表格行最多填充 600 像素，但是当视口小于 600 像素时，表格行将是屏幕宽度的 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 窗口大小调整为小于 600 像素时有效，在 FireFox 中调整大小和开发者模式时有效，在 IE 中调整大小时有效，但在具有模拟设备的 Chrome 开发者控制台中无效宽度超过 600 像素，并且不适用于我的 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 中，您必须通过将 !important 添加到您的 css 来覆盖它。

这是您在 JSfiddle 中运行的代码。我唯一更改的是将 !important 标签添加到您的 css 中！

https://jsfiddle.net/pLtb28a1/

请记住，覆盖带有!important 标志的标签的唯一方法是在覆盖上使用另一个!important 标志。如果您忘记使用它们，它们会使事情变得有些棘手。