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中使用了一些偏好，其中（如果你显示高级设置）

网页内容

我设定了这个：

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

如果我将字体更改为 Large ，页面的开始就会以您的体验方式运行。

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

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

Answer 2

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