html - 响应框需要适合页面的其余部分

Question

我对我页面上的响应式设计有点取笑......在 PC 浏览器中一切都是应该的..

但在其他移动设备上，盒子并不适合......

网站是 www.iværksætterpodcast.dk

在这里您可以从 iphone 5 浏览器中看到问题。 http://mobiletest.me/iphone_5_emulator/ # u = http://iværksætterpodcast.dk

因此，如果您单击从移动浏览器加载页面并浏览菜单，您将看到该页面不适合。

我试着碰碰运气:

page_content {
width: 824px;
opacity: 0.8;
overflow: hidden;
margin: 50px auto 120px;
padding: 5px 0 30px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

但这并没有帮助。

我认为它与:媒体查询有关吗？

好吧，如果你能安装一个带有响应式菜单的插件来解决我的其他问题，那也很好。希望你能帮助...

Answer 1

这样的事情对你有什么帮助。您可以展开窗口以查看它是否响应。

.wrap {
    max-width:960px;
    margin:0 auto;
}
.page-content {
    width: 92%;
    float:left;
    opacity: 0.8;
    overflow: hidden;
    margin:10px 2%;
    padding:20px 2%;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

Check it out on fiddle