HTML 电子邮件 - 交换按钮

Question

这特别与 HTML 电子邮件有关。所以我可以像这样创建一个按钮

<table border="0" cellpadding="0" cellspacing="0" class="emailButton" style="border-radius:3px; background-color:#6DC6DD;">
    <tr>
        <td align="center" valign="middle" class="emailButtonContent" style="padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
            <a href="..." target="_blank" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a>
        </td>
    </tr>
</table>

然后在媒体查询中，我可以为移动设备更改此按钮（包括更改文本）

@media only screen and (max-width: 480px){
    .emailButton{
        max-width:600px !important;
        width:100% !important;
        content: 'new text';
    }

    .emailButton a{
        display:block !important;
        font-size:18px !important;
    }
}

我的问题是，是否有任何方法可以更改按钮锚点 link？在移动设备上，我需要将它们 link 转到不同的页面，我想了解执行此操作的最佳方法。

谢谢

Answer 1

您可以尝试以下方法：

将 id 添加到您的锚标记

 <a href="..." target="_blank" id="buyNowButton" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a>

之后在想要的事件上做：

$("#buyNowButton").attr("href",newLink);

Answer 2

您可以有两个 <a> 元素并使用媒体查询隐藏其中之一。

@media only screen and (max-width: 480px) {
  a:not(.mobile-only) {
    display: none;
  }
}
@media only screen and (min-width: 480px) {
  a.mobile-only {
    display: none;
  }
}

<a href="#desktop">Desktop</a>
<a href="#mobile" class="mobile-only">Mobile</a>

Answer 3

我 95% 确定您不能在电子邮件中使用 JS。所以你可以做的是为移动设备创建一个单独的按钮，并且只在屏幕尺寸为 480 或更小时显示它。我添加了第二个媒体查询，这将确保非移动设备以 > 480px 的尺寸显示并且移动设备被隐藏。

 
@media only screen and (min-width: 481px) {
   #notmobile {
    display: block;
  }
  
  #ismobile {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .emailButton {
    max-width: 600px !important;
    width: 100% !important;
    content: 'new text';
  }
  #notmobile {
    display: none;
  }

  .emailButton a #ismobile {
    font-size: 18px !important;
  }
}

<table border="0" cellpadding="0" cellspacing="0" class="emailButton" style="border-radius:3px; background-color:#6DC6DD;">
    <tr>
        <td align="center" valign="middle" class="emailButtonContent" style="padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
           
          <a href="..." target="_blank" id="notmobile" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a>
          
            <a href="..." target="_blank" id="ismobile" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now Mobile</a>
        </td>
    </tr>
</table>

代码段无法运行

这是下面代码的现场演示，只需调整浏览器大小即可 window。 http://codepen.io/anon/pen/GJYXLa

HTML 电子邮件 - 交换按钮

HTML Email - swapping button

html

email

html-email