Div 显示/隐藏媒体查询答案

【问题标题】：Div show/hide media queryDiv 显示/隐藏媒体查询
【发布时间】：2012-08-01 12:52:03
【问题描述】：

我可以使用什么代码使特定的 div 仅在移动宽度上显示？

我的屏幕顶部有一个 100% 宽度的完整 div，希望它仅在设备被指定为移动宽度时显示。

【问题讨论】：

【解决方案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/ 或其他类似来源。

【讨论】：

这仅在我将 id 更改为类时才对我有用（其他一切都相同）。可能需要对我的 WP 主题做些什么。不管怎样，谢谢！

【解决方案2】：

听起来您可能想要访问设备的视口。您可以通过在标题中插入此元标记来做到这一点。

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

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

【讨论】：

我忘了添加这个，一个小时我循环了几乎所有的答案:))

【解决方案3】：

 Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
  #my-content{
   width:100%;
 }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { 
  #my-content{
   width:100%;
 }
 }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { 
display: none;
 }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
// Havent code only get for more informations 
 }

【讨论】：