Question

因此，我试图在div中展示一个移动网站，该网站看起来像是放在响应式html5网站上的智能手机。我已经搞乱了CSS，因此智能手机div可以在调整窗口宽度时保持稳固的宽高比。现在我想在div中安装一个iframe来模拟手机的屏幕。 我遇到的问题是我的响应式CSS技巧正在弄乱屏幕的位置。

这是一个jFiddle：http://jsfiddle.net/E6X4j/2/

我试图将它定位为相对，但这与CSS中的响应技巧混淆。有什么建议吗？

HTML：

<div id="smartphonewidth">
<div id="smartphoneheight">
    <object type="text/html" data="http://www.engadget.com" style="width:100%; height:100%;">    
    </object>
</div>

CSS：

#smartphonewidth {
      margin-left: 5%;
      background-image: url('http://i.imgur.com/lavEp8B.png?1?5267');
      background-repeat: no-repeat;
      width: 50%;
      padding: 20%;
      background-size: 100% 100%;}

#smartphoneheight {
    position: absolute;}

Answer 1

使用此链接CSS3 media queries for reponsive design

要定位小型设备，我们可以使用以下语法：

@media only screen and (max-device-width: 480px) {
          //your css here
    }

请查看此JSFIDDLE

<强> CSS：

#smartphonewidth {
          margin-left: 5%;
          background-image: url('http://i.imgur.com/lavEp8B.png?1?5267');
          background-repeat: no-repeat;
          width: 50%;
          padding: 20%;
          background-size: 100% 100%;

}

#smartphoneheight {
    position: relative;
    z-index:1;
    width:100%;
    height:100%;
}

Answer 2

FIDDLE

#smartphonewidth {
          margin-left: 5%;
          background-image: url('http://i.imgur.com/lavEp8B.png?1?5267');
          background-repeat: no-repeat;
          width: 58%;
          padding: 15%;
          background-size: 100% 100%;
}

#smartphoneheight {
    height: 15%;
position: relative;
margin-bottom: -69px;
margin-top: -50px;
}


<div id="smartphonewidth">
    <div id="smartphoneheight">
        <object type="text/html" data="http://www.engadget.com" style="width:100%; height:70%;">    
        </object>
    </div>
</div>

如何在响应式div中调整模拟智能手机屏幕的大小？

2 个答案: