在错误的媒体查询期间显示 div 的响应式设计答案

【问题标题】：Responsive design displaying div during wrong media query在错误的媒体查询期间显示 div 的响应式设计
【发布时间】：2013-07-09 14:14:38
【问题描述】：

我只是在玩响应式设计并将以下代码放在一起：

HTML

<div id="mobile">Mobile</div>
<div id="tablet">Tablet</div>
<div id="desktop">Desktop</div>

CSS

@media (min-width:800px){
     #mobile{
         display:hidden;
     }
     #tablet{
         display:hidden;
     }
     #desktop{
         width:100px;
         float:left;
         background-color:green;
     }
 }
 @media (min-width:500px) and (max-width:799px){
     #desktop{
         display:hidden;
     }
     #tablet{
         width:100px;
         float:left;
         background-color:black;
         color:white;
     }
     #mobile{
         display:hidden;
     }
 }

 @media (max-width:499px){
     #desktop{
         display:hidden;
     }
     #mobile{
         width:100px;
         float:left;
         background-color:blue;
         color:white;
     }
     #tablet{
         display:hidden;
     }
 }

移动平板电脑和桌面文本始终显示，根据 CSS，背景颜色和格式会发生应有的变化。

如果我在媒体查询宽度不匹配时隐藏了 div，为什么 div 中的文本仍然显示？

谢谢:)

【问题讨论】：

标签： html css

【解决方案1】：

display:hidden 不存在，是display:none 或visibility:hidden

【讨论】：

不用担心，这发生在我们最好的人身上！

【解决方案2】：

试试这个

http://jsfiddle.net/zZE6W/

CSS

@media (min-width:800px){
     #mobile{
         display:none;
     }
     #tablet{
         display:none;
     }
     #desktop{
         width:100px;
         float:left;
         background-color:green;
     }
 }
 @media (min-width:500px) and (max-width:799px){
     #desktop{
         display:none;
     }
     #tablet{
         width:100px;
         float:left;
         background-color:black;
         color:white;
     }
     #mobile{
         display:none;
     }
 }

 @media (max-width:499px){
     #desktop{
         display:none;
     }
     #mobile{
         width:100px;
         float:left;
         background-color:blue;
         color:white;
     }
     #tablet{
         display:none;
     }
 }

【讨论】：