css - 媒体查询最小高度显示锚顶部链接

Question

我有一个“转到顶部”链接，可将手机/平板电脑滚动到网页顶部。通常我会在 JS 中检测窗口和车身高度。

有没有办法在媒体查询中做到这一点？

@media only screen and (min-height: 500px) and (max-width: 768px) 
{
    .scrollTop { display: block }
}

score 1 · Accepted Answer

您可以添加一个标识页面顶部的锚点。在徽标上，例如：

<a href="/" id="top"><img src="logo.gif" /></a>

这是id="top"至关重要的。然后，您可以#top在“转到顶部”链接中链接到。前任：

<a href="#top">Go to top</a>

如果您希望它仅针对某些屏幕尺寸显示，只需display: none在您不希望它显示的媒体查询中显示。

score 0 · Accepted Answer

您的建议在包含垂直媒体查询的情况下是有效的。

2 回答 2