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