3

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

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

}
4

1 回答 1

7

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

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

}
于 2013-05-23T13:12:06.553 回答