0

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

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

谢谢 ：）

4

2 回答 2

3

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

于 2013-07-11T10:36:44.737 回答
0

尝试这个

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;
     }
 }
于 2013-07-11T10:39:14.067 回答