html - 仅关注特定媒体查询中的链接

Question

我有一个 div，里面有一些文本和一个链接。

<a href="mypage.html">
   <div>
      Text goes here ...
   </div>
</a>

但是，我只希望链接在一定的页面宽度下工作，即小于或等于 625px。像这样:

a {
   link-works: no;
}

@media (max-width: 625px){
   a {
      link-works: yes;
   }
}

上面的代码显然只是一个例子——但是这可以用 CSS 来完成吗？或者我需要一个 JavaScript 解决方案吗？

Answer 1

您可以使用名为 pointer-events 的属性

a {
   pointer-events: none;
}

@media (max-width: 625px){
   a {
      pointer-events: all;
   }
}