在响应式图像上显示/隐藏链接

Question

我想知道如何根据浏览器的宽度显示或隐藏图像链接。例如，在桌面浏览器上不显示链接，只在智能手机上显示。

我找到了第一种可以添加css类的方法：

 .nolink {pointer-events: none;
          cursor: default;}

在每个 @media屏幕上，不应显示该链接。

但是你知道是否有另一种方法可以做到这一点，而不是隐藏每个@media屏幕中的链接，只在最小宽度上添加一次？

谢谢。

Answer 1

您默认设置为文本，并将其更改为仅适用于移动设备。

.nolink {
       pointer-events: none;
       cursor: default;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {


.nolink {
    /* Change back to default link style */
}

}