更改移动设备链接的HREF

Question

我的文本当前链接到灯箱。我希望在移动设备上使用相同的链接，直接指向独立位置。

我绝对没有对JS的经验，但我认为这可能是解决方案的，因此请尽可能简单地理解。

我正在使用的代码：

<a class="fancybox" href="#contact_form_pop">Contact Us</a>
<div class="fancybox-hidden" style="display: none;">
<div id="contact_form_pop">[contact-form-7 id="3301" title="test"]</div>

</div>

预先感谢！

Paul

Answer 1

您可以使用媒体查询来实现此目的。

@media only screen and (min-device-width: 480px){
  
  #specialLink{
      display: inline-block;
  }
}
#specialLink{
  display: none;
}

因此，现在根据您的屏幕大小，在我的示例中将其标识为#speciallink的链接将会或不会显示。您可以将其与其他HREF结合起来，以靶向其他模态或任何您想要的东西。

Answer 2

我肯定会使用CSS来执行此操作，请参阅我的jsfiddle：

https://jsfiddle.net/guyytmjb/

您控制链接和使用

显示的内容

display: none;

和

display: block;

围绕不同的媒体查询。

我绝对会考虑阅读W3学校或其他地方的一些媒体查询部分，因为它们非常有用。不过，向前看，提出这样的问题并试图找出不同的方法是学习可能和您可以以不同方式做的事情的好方法，所以好工作！