html - 仅针对较窄的屏幕修改内部 href 链接

Question

我有一个包含大量产品图片的“概览”html 页面 - 每张图片都链接到一个可能包含 3 或 4 个产品的页面，例如 src="gadgets-1.html"

在桌面设备上，用户可以在目标页面上看到大多数产品，或者可以根据需要轻松向下滚动。

但是在 css MQ 将所有列转换为 100% 宽度的窄屏幕上，最后的元素不一定在 View 中，用户必须凭直觉向下滑动页面，所以我希望链接图像直接链接到目标页面上的相关元素。

我已经建立了运行良好的 anchor 链接，例如 src="gadgets-1.html#red-thing"，但我不希望“#red-thing”在更宽的屏幕上处于事件状态。

要恢复，我希望链接在更宽的屏幕上是 gadgets-1.html 并且gadgets-1.html#red-thing 在窄屏幕上。

我看不出这可以(或应该)如何用 css 完成。应该用js还是php？如果是，怎么办？

Answer 1

我能想到几个解决方案。我通常不喜欢使用 javascript 根据屏幕宽度修改 DOM，但如果您愿意，这是一个可以接受的解决方案。

或者你可以像这样做一些简单的事情:

<div class="links">
    <a class="mobileLink" href="gadgets-1.html#red-thing">gadgets-1</a>
    <a class="desktopLink" href="gadgets-1.html">gadgets-1</a>
</div>

使用一些 css 来根据屏幕宽度隐藏正确的链接

.mobileLink{
    display: none;
}
@media screen and (max-width: 992px) {
    .mobileLink{
        display: inline-block;
    }
    .desktopLink{
        display: none;
    }        
}