Question

我正在设计一个移动模板。在那里，标题链接到网站的主页。但问题是桌面和移动设备有两种不同的标头。我想将这两个图像链接到网站的主页。最初我试过

 .Header {
    width: 320px;
    display: block;
    height: 100px;
    background: url('Images/mobile.jpg') no-repeat;  
} 
.headerimg img {
    display: none !important;
}


<tr> 
        <td width="500"><a class="headerimg" href="http://www.google.com/" target="_blank"><img src="Images/desktop.png" alt="Google" height="160" width="500" border="0" style="display:block;"></a></td>
    </tr>

然后我尝试按尺寸放置两张图片，并根据视图隐藏一张图片

    .MobileHeaderImg {display: none !important;}
.HeaderImg {display: block !important;}
.HeaderImg a{display: block !important;}
@media handheld, screen and (max-width: 500px) {
  .MobileHeaderImg {
position: relative;
display: block !important;
width: 320px !important;
height: 100px !important;
}


<tr> 
  <td width="500"><a  href="http://www.google.com/" target="_blank"><img src="Images/header.png" class="HeaderImg" alt="" height="160" width="500" border="0" style="display:block;"></a><a class="headerimg" href="http://www.google.com/" target="_blank"><img src="Images/mobile.png" class="MobileHeaderImg" alt="" height="160" width="500" border="0" style="display:block;"></a></td>

任何想法在此先感谢

Answer 1

我忘记了从（在酸性电子邮件中的某个地方）选择的地方，但下面的代码应该可以解决您的问题。可能需要进行一些调整以适应您的模板。

<!doctype html>
<html>
<head>
<style>
    @media only screen and (min-device-width: 500px) and (max-device-width: 1024px)  {
        span[id=switcher] {display:block;
        background-image: url(http://www.emailonacid.com/images/blog_images/Emailology/2013/tablet.jpg) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        width: 300px !important;
        height: 250px !important; }
        img[id=houdini] {display: none !important; }
    }
    @media only screen and (max-device-width: 489px) {
        span[id=switcher] {display:block;
        background-image: url(http://www.emailonacid.com/images/blog_images/Emailology/2013/mobile.JPG) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        width: 300px !important;
        height: 250px !important; }
        img[id=houdini] {display: none !important; }
    }
</style>
<body>
    <a href="http://www.emailonacid.com"><span id="switcher"><img id="houdini" src="http://www.emailonacid.com/images/blog_images/Emailology/2013/Desktop.jpg" alt=""></span></a>
</body>

响应href浏览器和移动电子邮件的不同图像

1 个答案: