小编Pet*_*oss的帖子

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

我正在开发一个首先设计为移动设备的网络应用.由于我的所有初始布局都是针对小屏幕设计的,因此我推出了一款手机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 …