2

这是我第一次使用 Susy。我真的很喜欢我在文档/教程中看到的内容，但是在我的一些第一次布局尝试中遇到了一些意想不到的结果。

版本信息：

>gem install compass-susy-plugin
Successfully installed sass-3.1.2
Successfully installed chunky_png-1.2.0
Successfully installed fssm-0.2.7
Successfully installed compass-0.11.1
Successfully installed compass-susy-plugin-0.9

>ruby --version
ruby 1.9.2p136 (2010-12-25 revision 30365) [x86_64-darwin10.5.0]

下图显示了我使用教程html 和 screen.scss 逐字获取的结果：

为什么_is_the_h1_off_the_grid_somewhat

如您所见，检查 h1 元素显示它位于网格之外。这是正常的吗？

4

2 回答 2

2

请参阅我对另一个类似问题的评论：

Susy 不像其他所有网格系统一样只是另一个网格系统。它旨在实现一个非常特定的目的：内部流动的网格。用于创建网格的单位将应用于容器，而不是每列。里面的一切都是用百分比构建的。你看到的很正常。由于亚像素舍入，所有流体网格都是如此。这不是错误，它是构建响应式网站的一部分。

如果您需要精确到像素的网格，Susy 不适合您。这完全取决于您要构建的内容。

重新调整浏览器的大小，看看它是如何工作的。您会注意到网格对齐并浮动在其参考线的几个像素内，但网格保持完整并且永远不会触发水平滚动条。

干杯!

-e

于 2012-02-15T06:54:44.303 回答
1

如果我在 Chrome 与 Firefox 中慢慢展开浏览器窗口，那么 Chrome 中的网格和文本会比 Firefox 跳得更多。Firefox 的布局似乎更精确（这可能会影响渲染速度）。

在 Firefox 中，当我调整大小时，所有内容总是完美排列并一起移动——文本区域和网格。在 Chrome 中，当我调整大小时，我可以看到页脚文本在不同时间移动、文章文本、网格、等等。

这是一个示例，其中文本和网格在 Chrome 中偏离了相当多的像素：

在此处输入图像描述

于 2011-08-18T02:36:21.687 回答