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

Question

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

我正在开发一个设计为移动优先的网络应用程序。由于我所有的初始布局都是为小屏幕设计的，因此我引入了手机 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;
}

}

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

}