基礎媒體查詢範圍錯誤

所以我不得不修復一個基礎上建立的項目中的錯誤，當我終於意識到是什麼導致了它，它讓我思考。基礎媒體查詢範圍錯誤

該錯誤出現在1024像素和1027像素寬度之間 - 導航將從移動狀態轉到桌面，但某些元素仍然會保留在移動版本中。

在基礎_settings.scss文件，我發現這個：

//Media Query Ranges 
$small-range: (0em, 40em); 
$medium-range: (40.063em, 64em); 
$large-range: (64.063em, 90em); 
$xlarge-range: (90.063em, 120em); 
$xxlarge-range: (120.063em);

正如你可以看到有一個無處不在的差距 - 比如查詢在64em結束和下一個開始只在64.063em。

所以移動導航會改變狀態到桌面64em什麼轉換爲1024px寬度，但其他一些元素將只出現在64.063em什麼是約1027px？

我編輯了變量並修正了它，但我想知道他們爲什麼要這樣做？

來源

2015-11-17 Daumantas Jakas

我想到的只是一個懶惰的瀏覽器造成延遲，這些範圍的創建者可能會在所有之間放置相同的**差距**，以使其看起來一致。這可能有不同的原因 - 這只是一個場景，我不確定。 – SidOfc

唯一能回答這個問題的人是基金會的維護者。任何人的答案都是純粹的猜測。 – cimmanon

技術上64.063em幾乎所有的瀏覽器都應該是1025px，除非你已經調整了基本字體大小。你會從自己的文件，他們在意見中的值注意這裏（修剪以方便您閱讀）：

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px */ 

@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

你會發現，它們引用1024px和1025px。瀏覽器可能會稍微不同地呈現該值並導致差異。我會在Github上打開一個問題：https://github.com/zurb/foundation/issues

來源

2015-11-18 07:24:41 graygilmore

基礎媒體查詢範圍錯誤

回答

相關問題