Question

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

有没有办法在媒体查询中执行此操作？

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

Answer 1

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

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

这是至关重要的id="top"。然后，您只需链接到“转到顶部”链接中的#top即可。例如：

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

如果您希望仅针对特定屏幕尺寸显示此内容，则在您不希望其显示时，仅在媒体查询中显示display: none。

Answer 2

如果包含垂直媒体查询，您的建议有效。