媒體查詢最小高度顯示錨頂部鏈接

Question

我有一個「返回頂部」鏈接，滾動移動/平板電腦的網頁的頂部。通常我會在JS中檢測窗口和身高。

有沒有辦法在媒體查詢做到這一點？

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

Answer 1

你的建議是用一種內含垂直媒體查詢有效。

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
• http://cognition.happycog.com/article/go-vertical
• http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/
• http://boagworld.com/dev/vertical-media-queries/

Answer 2

您可以添加一個標識頁面頂部的錨點。在徽標上，例如：

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

這是關鍵的id="top"。然後，您可以在「轉到頂部」鏈接中鏈接到#top。例如：

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

如果您希望這僅顯示某些屏幕尺寸，只是display: none媒體查詢時，你不希望它顯示。