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>

提前致谢！

保

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学校或其他地方读取一些媒体查询位，因为它们非常有用。然而，往前走，提出这样的问题并试图找出不同的做事方式是了解可行的方法和以不同方式做什么的好方法，这样做很好！

更改移动设备链接的href

2 个答案: