Question

我坐在我页面上的响应式设计上稍微挑逗一下...... 在PC浏览器中，一切都是应该的..

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

该网站是www.ivÃ|ksÃ| tterpodcast.dk

在这里你可以看到iphone 5浏览器的问题。 http://mobiletest.me/iphone_5_emulator/ #u =http://ivÃ|ksÃ| 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

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

1 个答案: