更改移动设备的链接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学校或其他地方的一些媒体查询位，因为它们非常有用。继续前进，提出这样的问题并试图找出不同的方式来做事情是一个很好的方式来学习什么是可能的，你可以以不同的方式做什么，这么好的工作！