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;
    }
}

我的问题是，有没有办法改变按钮锚链接？在移动设备上，我需要将它们链接到不同的页面，我希望看到最好的方法。

由于

Answer 1

我95％确定你不能在电子邮件中使用JS。因此，您可以创建一个单独的移动按钮，仅在屏幕尺寸为480或更小时显示它。我已经添加了第二个媒体查询，该查询将确保非移动设备以大小＆gt;显示。 480px和手机是隐藏的。

＆＃13;

 
@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;
  }
}

＆＃13;

<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>

＆＃13;

代码段无法正常工作

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

Answer 2

您可以尝试以下方法：

为您的锚标记添加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 3

您可以拥有两个<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>

HTML电子邮件 - 交换按钮

3 个答案: