0

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

我发布了一个要点，它也在 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。问题是，它在错误的断点处改变颜色。

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

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

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

4

2 回答 2

2

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

网页内容

我设置了这个：

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

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

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

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

于 2013-10-19T14:18:31.063 回答
0

由于我有几个人告诉我一切对他们来说都是正确的，我认为问题已经结束了。我注意到，在我的 Ubuntu 机器上，某些网站上的字体似乎更高更宽，有时在其他系统上没有时会换行。浏览器没有放大，所以我想我需要在 ubuntu 论坛上提问。

于 2013-10-19T13:57:40.297 回答