如何让媒体查询/css在html电子邮件中工作
提问于 2019-02-18 05:57:50
我在获取正确显示的html电子邮件时遇到问题。html包含媒体查询，以使其响应不同大小的设备...它可以在浏览器中正确显示，但当作为电子邮件发送时，css似乎无法正常工作来调整图标位置。
我尝试过缩小css，让css变得重要，等等，但都没起作用。在检查Gmail中的电子邮件的html时，我注意到类名称已经被Google更改了，并且没有应用任何规则。不确定为什么会发生这种情况，或者如何绕过它。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Testing Testing 123</title>
<style type="text/css">
#bodyBg {
margin: 0px;
padding: 0px;
background-color: white;
}
@media only screen
and (max-device-width: 325px)
and (min-device-height: 500px)
and (max-device-height: 580px){
.helpfulIcons {
height:62px;
width: 66px;
}
#helpfulIconTable {
position: relative;
bottom: 150px;
width:100%
}
#socialIconTable {
position: relative;
bottom: 550px;
width: 90%;
left: -8px;
margin-left:auto;
margin-right:auto;
}
.socialIcons {
height: 79.36px;
width: 84.48px;
}
socialCells {
padding-right: 5px;
width:25%;
text-align: center;
}
}
@media only screen
and (min-device-width: 326px)
and (max-device-width: 364px) {
.helpfulIcons {
height:62px;
width: 66px;
}
#helpfulIconTable {
position: relative;
bottom: 150px;
width:100%
}
#socialIconTable {
position: relative;
bottom: 550px;
width: 90%;
left: -8px;
margin-left:auto;
margin-right:auto;
}
.socialIcons {
height: 79.36px;
width: 84.48px;
}
socialCells {
padding-right: 5px;
width:25%;
text-align: center;
}
}
@media only screen
and (min-device-width: 365px)
and (max-device-width: 499px)
and (max-device-height: 700px){
.helpfulIcons {
height:62px;
width: 66px;
}
#helpfulIconTable {
position: relative;
bottom: 150px;
width:100%
}
#socialIconTable {
position: relative;
bottom: 550px;
width: 100%;
left: -8px;
}
.socialIcons {
height: 79.36px;
width: 84.48px;
}
socialCells {
padding-right: 5px;
width:25%;
text-align: center;
}
}
@media only screen
and (min-device-width: 365px)
and (max-device-width: 499px)
and (min-device-height: 701px){
.helpfulIcons {
height:124px;
width: 132px;
}
#helpfulIconTable {
position: relative;
bottom: 160px;
width:100%
}
#socialIconTable {
position: relative;
bottom: 850px;
width: 100%;
left: -8px;
}
.socialIcons {
height:124px;
width: 132px;
}
socialCells {
padding-right: 5px;
width:25%;
text-align: center;
}
}
@media only screen
and (min-device-width: 400px)
and (max-device-width: 450px)
and (min-device-height: 790px)
and (max-device-height: 850px){
.helpfulIcons {
height:248px;
width: 264px;
}
#helpfulIconTable {
position: relative;
bottom: 300px;
width:100%
}
#socialIconTable {
position: relative;
bottom: 1620px;
width: 90%;
left: -8px;
margin-left:auto;
margin-right:auto;
}
.socialIcons {
height: 248px;
width: 264px;
}
socialCells {
padding-right: 5px;
width:25%;
text-align: center;
}
}
@media only screen
and (min-device-width: 400px)
and (max-device-width: 450px)
and (min-device-height: 700px)
and (max-device-height: 780px){
.helpfulIcons {
height: 75.39px;
width: 80.256px;
}
#helpfulIconTable {
position: relative;
bottom: 165px;
width:100% }
#socialIconTable {
position: relative;
bottom: 590px;
width: 90%;
left: -8px;
margin-left:auto;
margin-right:auto;
}
.socialIcons {
height: 79.36px;
width: 84.48px;
}
socialCells {
padding-right: 5px;
width:25%;
text-align: center;
}
}
@media only screen
and (min-device-width: 700px)
and (max-device-width: 900px) {
.helpfulIcons {
height:111.6px;
width: 118.8px;
}
#helpfulIconTable {
position: relative;
bottom: 170px;
width: 70%;
margin-left: auto;
margin-right: auto;
}
#socialIconTable {
position: relative;
bottom: 705px;
width: 40%;
left: -8px;
}
.socialIcons {
height:99.2px;
width: 105.6px;
}
socialCells {
padding-right: 5px;
width:25%;
text-align: center;
}
}
@media only screen
and (min-device-width: 901px) {
.helpfulIcons {
height:173.6px;
width: 184.8px;
}
#helpfulIconTable {
position: relative;
bottom: 230px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
#socialIconTable {
position: relative;
bottom: 930px;
width: 40%;
}
.socialIcons {
height: 124px;
width: 132px;
}
.socialCells {
padding-right: 10px;
width:25%;
text-align: center;
}
}
</style>
</head>
<body id="bodyBg">
<!--[if gte MSO 9]>
<table width="411"><tr><td>
<![endif]-->
<table id="bgTable" style="width:100%">
<tr>
<td>
<img src="http://kingtaxsavannah.com/tax-prep/images/phone/bg_411x823.jpg" alt="king tax get social" style="width:100%" />
<table id="helpfulIconTable">
<tr>
<td style="padding-left: 20px; padding-right: 20px; width:33.33%; text-align: center;"><a href="https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp" target="_blank"><img alt="IRS Where's My Refund" class="helpfulIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/irs_icon.png" /></a></td>
<td style="padding-right: 20px; width:33.33%; text-align: center;"><a href="https://dor.georgia.gov/wheres-my-refund" target="_blank"><img alt="GA Where's My Refund" class="helpfulIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/ga_icon.png" /></a></td>
<td style="padding-right: 20px; width:33.33%; text-align: center;"><a href="https://mydorway.dor.sc.gov/_/" target="_blank"><img alt="SC Where's My Refund" class="helpfulIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/sc_icon.png" /></a></td>
</tr>
</table>
<table id="socialIconTable">
<tr>
<td class="socialCells" style="padding-left: 20px;"><a href="https://www.facebook.com/kingtaxsavannah" target="_blank"><img alt="Facebook" class="socialIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/facebook.png" /></a></td>
<td class="socialCells"><a href="https://www.instagram.com/kingtaxsavannah" target="_blank"><img alt="Instagram" class="socialIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/instagram.png" /></a></td>
<td class="socialCells"><a href="https://twitter.com/KingTaxSavannah" target="_blank"><img alt="Twitter" class="socialIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/linkedin.png" /></a></td>
<td class="socialCells"><a href="https://www.linkedin.com/company/kingtaxsavannah" target="_blank"><img alt="Linkedin" class="socialIcons" src="http://kingtaxsavannah.com/tax-prep/images/phone/icons/twitter.png" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte MSO 9]>
</td></tr></table>
<![endif]-->
</body>
</html>当我在chrome中打开html文件并在不同的移动设备设置下对其进行测试时，图标显示在我希望它们所在的确切位置。但当我实际将html作为电子邮件发送时，所有的图标都在主图像的下方。
回答 1
Stack Overflow用户
发布于 2019-02-20 12:28:42
谢谢你的评论。我以为Gmail不支持我的css，但事实证明，就像你说的，他们不允许定位。因此，我将我的背景图像设为表格的背景图像，并将图标放置在表格行的单个单元格中。我使用空表行来定位。css通过媒体查询根据设备屏幕的大小调整空表行的高度。就像一种护身符！谢谢!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54741207
复制
腾讯云开发者
