斷點和'font-size'參數

Question

有沒有人有使用'font-size'參數和at-breakpoint mixin的經驗？

在文檔它指出以下...

<$font-size>: When using EMs for your grid, the font size is important. Default: $base-font-size 

在設計中，我與我正在移動第一種方法，以使$基本字體大小= 12px的工作。

我然後添加在50em的斷點（任意值這個例子）如下...

@include at-breakpoint(50em 12, 16px) { 
     .container{ 
     @include container; 
     } 
    } 

我不知道我是否已經正確地得到了這個理解，但是我所期待的，鑑於我已經爲'font-size'指定了一個值，一旦屏幕超過50em，我的字體大小將增加到16px。

但是，我想我可能得到了關於這個'font-size'參數的用途的錯誤結尾，因爲字體大小在任何尺寸下都保持在12px。

有誰知道這個參數會影響什麼？

Answer 1

看來這個功能沒有很好的記錄。它不是設置字體大小，而是修復基於em的媒體查詢。如果您使用的基本字體大小爲12px，這非常重要。

瀏覽器始終以基於em的媒體查詢爲基礎，該查詢相對於默認瀏覽器字體大小（16px）。它根本沒有任何意義，但他們是這樣做的。因此，爲了讓您在50em（* 12px）處設置斷點，我們必須將斷點設置爲37.5em（* 16px，默認爲瀏覽器）。傳遞您的基礎字體大小可以讓我們進行調整。

這應該有更好的記錄，而且論點應該更好地命名。我創建了一個issue on GitHub。