带有 display:none 和媒体查询的响应式 CSS

Posted

技术标签:

【中文标题】带有 display:none 和媒体查询的响应式 CSS【英文标题】:Responsive CSS with display:none and media queries 【发布时间】:2013-05-18 20:30:51 【问题描述】:

我确信这是一个非常基本的问题,所以提前道歉,因为我是新手。

我正在开发一个设计为移动优先的网络应用程序。由于我所有的初始布局都是为小屏幕设计的,因此我引入了手机 jpg 作为<img>。然后我使用绝对定位将我的画布覆盖在上面。这给了我一个伪手机屏幕,我可以在试验我的设计时使用,而无需不断地用手机进行测试。

我们的想法是使用合适的媒体查询,当遇到较小的屏幕时使用display:block 来防止显示图像。

在很短的时间内我让它工作,但现在我已经破坏了它(没有备份))并且看不到如何!它可以在更宽的桌面屏幕上正常工作。显示图像容器,并且背景画布正确放置在顶部。然而,图像容器也显示在移动设备上(并且由于没有绝对位置),然后我的真实布局显示在 .

html 看起来像这样...

<div id="container">
    <img src='phone.jpg' class="desktop-visible"/>
</div>

<div id="backdrop">
    Text
</div>

我的 CSS 目前是这个 ...

// Set Defaults
.desktop-visible  display:none;

// Desktop and landscape tablets
@media (min-width: 768px) 

.desktop-visible  display: block; margin: 0 auto; 

#container 
        position:relative;
        width: 538px;
        margin: 0 auto;


#container img 
        position:absolute;
        margin: 0 auto;


#backdrop 
        margin: 0 auto;
        position:absolute;
        top:86px;
        left:26px;
        width:483px;
        max-height: 862px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;


// Portrait tablets and landscape mobiles
@media (max-width: 767px) 

.desktop-visible  display: none; 

#container 
    position:relative;
    width: 538px;
    margin: 0 auto;


#container img 
    display: none;


#backdrop 
    margin: 2px auto;
    height: 820px;  




// Portrait mobiles
@media (max-width: 480px) 

.desktop-visible  display: none; 

#container 
    display: none;


#container img 
    display: none;


#backdrop 
    margin: 2px auto;
    height: 820px;



【问题讨论】:

你能设置一个JSFiddle给我们看看吗?如果您复制粘贴您的 CSS 位,您可能会在此过程中发现您的问题。 jsfiddle.net 很好的建议迈克尔,但现在已修复见下文。谢谢。 【参考方案1】:

您没有关闭第一个媒体查询。 :-)

// Set Defaults
.desktop-visible  display:none;

// Desktop and landscape tablets
@media (min-width: 768px) 

.desktop-visible  display: block; margin: 0 auto; 

#container 
        position:relative;
        width: 538px;
        margin: 0 auto;


#container img 
        position:absolute;
        margin: 0 auto;


#backdrop 
        margin: 0 auto;
        position:absolute;
        top:86px;
        left:26px;
        width:483px;
        max-height: 862px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;


 // you missed this one

// Portrait tablets and landscape mobiles
@media (max-width: 767px) 

.desktop-visible  display: none; 

#container 
    position:relative;
    width: 538px;
    margin: 0 auto;


#container img 
    display: none;


#backdrop 
    margin: 2px auto;
    height: 820px;  




// Portrait mobiles
@media (max-width: 480px) 

.desktop-visible  display: none; 

#container 
    display: none;


#container img 
    display: none;


#backdrop 
    margin: 2px auto;
    height: 820px;



【讨论】:

谢谢尼尔斯。这解决了它。好消息是我很接近。尴尬的是我错过了右括号。哦! 哈,我都没注意到。尼斯抓到尼尔斯。

以上是关于带有 display:none 和媒体查询的响应式 CSS的主要内容,如果未能解决你的问题,请参考以下文章

媒体查询不起作用?

响应式开发学习笔记

带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题

响应式web-媒体查询

响应式WEB&媒体查询

响应式布局之媒体查询功能