html - Foundation 4 (Zurb) 的各种问题 - 一页

Question

所以这是我第一次尝试使用响应式框架......对于构建一般的响应式网站来说也是相当新的 - 但是从头开始构建它们并调整每个元素的大小就更幸运了......虽然 Foundation 似乎如果我能解决这个问题，我会喜欢一个更好的解决方案!

正在进行的工作在这里:http://client.analog.la/360/

它在我的桌面浏览器中表现“正常”(调整到 400)除了菜单有问题 - 我遇到的问题是试图让菜单下拉到 Logo 下方并正确居中。

在实际的手机和平板电脑上有更多问题......菜单位于上方，整个布局或一侧，根本没有下降。在 ipad 上，整个布局似乎只有大约 95% 的页面宽度，右侧有一个随机边距……在 iPhone 上，整个布局似乎只有大约 50% 的宽度……这看起来……太糟糕了。在相同分辨率下，布局在设备上的外观与在桌面上的外观之间存在如此大的差异，我有点困惑……另外，真的不确定我在调整大小方面出了什么问题，让它看起来如此错误在设备上!

如有任何帮助，我们将不胜感激!

谢谢，

Answer 1

不确定您是否仍在就此寻求帮助，但您的代码库中存在许多问题，而且很难说是哪些问题导致了您试图解决的行为。你的第一个div使用 columns类，但它没有嵌套在 row 中.在其他地方，您有行立即嵌套在其他行中，没有明显的好处，更多 columns嵌套在其他 columns没有插入 row , 并嵌套 rows不会崩溃的。您还在使用 spacer.png在一些地方，这几乎让我流下了眼泪。

而您的顶级 header 在 spans 中而不是 h1 .我唯一的猜测是您试图回避 Foundation 的默认样式？使用类。你需要那些 h1 s 用于 SEO、语义等。

无意侮辱，但您最好查看一下 Treehouse并提高您的编码技能 - 可以在未来的工作中为您节省大量时间和挫败感。