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論壇中提問。