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

}

具有display：none和媒体查询的响应式CSS

1 个答案: