1

我的第一个响应式项目并没有我希望的那么顺利！

我已经完成了一个在 768 和 480 处有断点的初始概念，当我在浏览器中调整大小时它会很好地中断。我在我的智能手机上做了最后的测试，我得到了完整的网站！

我一直在用头撞墙，我当然希望有人能保释我！

您可以在此处查看页面 - www.siphon-marketing.com/unifirst

此外，当在桌面上调整我的屏幕大小时，它会坏掉，但我需要在每个点刷新以强制一些元素就位......有什么办法可以防止这种情况发生吗？

非常感谢！

4

3 回答 3

1

使用元视口标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

看这里

于 2012-09-14T21:02:29.833 回答
0

在您的媒体查询中，您已将.container widthand定义.header width为 100%。我对此并不积极，但我认为这就是正在发生的事情。您.container最初设置为width: 1000px;. 此时，您的移动设备将其视为以桌面为中心的网页。移动浏览器在渲染大型网页时都有不同的功能。有些人会尝试重排文本以适应您的屏幕（而其他元素处于正常桌面位置），有些人会缩小页面以适应其视口的整个宽度，而其他人不会对它做任何事情，所以你必须平移和缩放整个页面。

媒体查询非常适合在不同大小的视口中强制响应式设计。这些样式会覆盖媒体查询之外的那些原始样式，但是如果移动浏览器认为页面最初是 1000 像素宽，它将“扩展”到 1000 像素。如果您的媒体查询将其覆盖为 100%，则浏览器可能会将其视为“1000 像素的 100%”。

尝试在媒体查询中定义像素宽度，看看是否有帮助。如果这是准确的，我想知道在您的媒体查询中您是否可以这样说：

.container {
  width: 480px;
  width: 100%;
}

同样，我没有对此进行测试，但这个想法听起来可能会奏效。不过，我很想看看这是否有帮助，所以如果您尝试一下，请回复评论并告诉我。谢谢！

于 2012-09-14T20:53:58.340 回答
0

我发现有两个视口...一个覆盖另一个

于 2012-09-17T13:41:25.043 回答