Question

我只是在玩响应式设计并整理以下代码：

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中的文本仍然显示？

谢谢：）

Answer 1

display:hidden不存在，只有display:none或visibility:hidden

Answer 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;
     }
 }

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

2 个答案: