Div顯示/隱藏媒體查詢

Question

只有在移動寬度上，我可以使用哪些代碼來製作特定的div顯示？

我的屏幕頂部有一個100％寬度的完整div，希望它只在設備指定爲移動寬度時顯示。

Answer 1

我不確定，您的意思是「移動寬度」。但在每種情況下，CSS @media都可用於以屏幕寬度爲基礎隱藏元素。看到一些例子：

<div id="my-content"></div> 

...和：

@media screen and (min-width: 0px) and (max-width: 400px) { 
    #my-content { display: block; } /* show it on small screens */ 
} 

@media screen and (min-width: 401px) and (max-width: 1024px) { 
    #my-content { display: none; } /* hide it elsewhere */ 
} 

一些真正的移動檢測是一種很難編程和相當困難的。最終看到：http://detectmobilebrowsers.com/或其他類似的來源。

Answer 2

這聽起來像你可能想要訪問設備的視口。您可以通過在標題中插入此元標記來完成此操作。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

http://www.w3schools.com/css/css_rwd_viewport.asp