我正在为移动设备构建设备响应式电子邮件。作为其中的一部分，我希望将一些出现在桌面/网络邮件上的图像隐藏在移动设备上，反之亦然。
我已经让它在我测试过的所有 Web 客户端和移动设备上运行，但 Outlook 会显示文件中的所有图像。
我尝试过display:none;的组合。,能见度; 在图像、tds、表格上隐藏和width="0"并尝试使用 div。
我知道有一种使用背景图像代替的解决方法，但这并不理想，因为某些图像充当按钮并且需要它们后面的链接。
将不胜感激任何帮助，
谢谢。
沙龙
问问题
5197 次
2 回答
0
我有同样的问题，我想要两个不同大小的图像，并希望它们都可以作为链接点击。
我的媒体查询仅针对移动设备，因此我可以定义包含表格单元格的高度并确保链接是设置的块高度。
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
td[class="image-class"],
a[class="image-link-class"]{
height:165px!important;
display: block; !important};
img[class="desktop-content"]{
display: none !important;
height:0 !important;
min-height: 0 !important;
max-height: 0 !important; width:0 !important; overflow: hidden !important;
}
然后，图像有一个类，将火箭筒的所有内容都设置为 0，以确保它确实是隐藏的。对于基于桌面的电子邮件客户端，表格单元格的背景图像永远不会被看到，然后被内联图像覆盖
<td height="473" background="image-mobile.jpg" class="image-class"><a href="#" class="image-link-class"><img src="image-desktop.jpg" width="318" height="473" border="0" alt="" style="display:block" class="desktop-content"></a></td>
于 2013-05-20T15:44:33.693 回答
0
感谢您的回复，我现在已经设法修复它。我认为马特说的是对的。我的问题与内联样式有关。
于 2012-08-03T08:36:48.800 回答