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

Posted 2023-03-05

【中文标题】媒体查询响应式表格设计不响应移动设备

【英文标题】：Media query responsive table design not responding to mobile

【发布时间】：2016-07-25 18:11:20

【问题描述】：

我希望每个表格行最多填充 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。

【问题讨论】：

在 FF 上工作...

在 Chrome 中为我工作。

它适用于 FireFox。它不适用于 Chrome 开发者控制台或我的 Android Nexus 6。

对于移动设备添加meta viewport widthwidth=device-width。

我们现在对html电子邮件中的媒体查询有很好的支持，请不要气馁。事情正在变得更好。

【参考方案1】：

添加标签

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

解决了这个问题。

【讨论】：

成功了。好答案！

【参考方案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 标志。如果您忘记使用它们，它们会使事情变得有些棘手。

【讨论】：

虽然是内联的，但他使用的实际样式不会以负面的方式覆盖 CSS 文件中的任何内容。

在这个 jsfiddle 中删除 !important 仍然会产生预期的结果，所以这不是解决方案。

看来你是对的！糟糕，您的答案似乎是正确的！