css - 响应式 CSS 显示 :none and media queries

Question

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

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

想法是然后使用合适的媒体查询，当遇到较小的屏幕时使用 display:block以防止显示图像。

有很短的时间我让它工作，但现在我把它弄坏了(没有备份))并且看不出如何!它在更宽的桌面屏幕上运行良好。显示图像容器并且背景 Canvas 正确放置在顶部。然而，图像容器也显示在移动设备上(并且没有绝对位置)，然后我的真实布局显示在 .

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

}