Susy at-breakpoint没有打破预期的点

Question

我正在学习Susy，我正在尝试使用at-breakpoint并遇到一些奇怪的问题。

我发布了一个要点，它也在sassmeister上：

http://sassmeister.com/gist/7050948

https://gist.github.com/keithhayden/7050948

我为媒体布局定义了一些变量：

$susy-phone-wide:       24em 8       // 384px
$susy-tablet-portrait:  30em 12      // 480px to 600px
$susy-tablet-landscape: 37.5em 16    // 600px to 768px
$susy-computer:         48em 24      // 768px to ?

然后只是为了看断点在哪里生效，我只有一个div在每个断点处改变颜色。 问题是，它在错误的断点处改变颜色。

• 应该在384px变为绿色，直到480px（-96px）才变化
• 应该在480px处变黄，直到600px（-120px）才会变化
• 应该在600px变红，直到750px（-150px）才变化
• 应该在768px变成紫色，直到960px（-192px）才变化

也许我的数学是关于媒体布局的em值。 我使用pxtoem.com来计算em值。

实际的实际用例是我将添加按钮，在移动设备上将从上到下排列，宽度为100％，但一旦在非移动设备上，它们将变为宽度自动并从右到左排列。

Answer 1

我在Chrome 26中的Ubuntu上查看了它，它似乎也很好。 但后来我在chrome://settings使用了一些偏好，其中（如果你显示高级设置）

网页内容

我设定了这个：

• 字体大小： 中等
• 页面缩放： 100％

如果我将字体更改为“ 大”，则页面开始按照您的体验方式运行。

因此，无论在媒体查询中使用相对单位如何，都会发生这种情况。 如果浏览器覆盖单元的基础。 您可以只将媒体查询更改为px并在设计的其余部分使用相对单位...我不确定这将如何影响您的网格解决方案......但它会摆脱这种行为。

但是，当在浏览器中将字体更改为大或放大时，视口开始模拟较小的设备......所以基本上，您最初获得的行为是正确的（您不应该再看实际的像素）。 如果我将放大（或设置em基础巨大）足够我将按钮从上到下排列...因为我的屏幕宽度与字体（ em -base）比率将类似于手持设备上的一个设备。

Answer 2

既然我有几个人告诉我一切都适合他们，我认为这个问题就在我身边。 我注意到在我的Ubuntu机器上，某些网站上的字体似乎更高更宽，有时在其他系统上没有。 浏览器没有放大，所以我需要在ubuntu论坛中提问。