2

ブレークポイントのミックスインで「font-size」パラメータを使用した経験はありますか？

ドキュメントには次のように記載されています...

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

私が使用しているデザインでは、モバイルファーストのアプローチを採用しているため、$ base-font-size=12pxです。

次に、次のように50em（この例では任意の値）にブレークポイントを追加しています...

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

これを正しく理解したかどうかはわかりませんが、「font-size」の値を指定した場合、画面が50emを超えるとフォントサイズが16pxに増加することを期待していました。

ただし、フォントサイズはどのサイズでも12pxのままなので、この「font-size」パラメータの目的に関してスティックの端が間違っている可能性があると思います。

このパラメータが何に影響するか知っている人はいますか？

4

1 に答える 1

0

機能は十分に文書化されていないようです。フォント サイズを設定するためではなく、em ベースのメディア クエリを修正するためのものです。のベース フォント サイズを使用している場合12px、これは非常に重要です。

ブラウザーは常に、既定のブラウザー フォント サイズ (16px) を基準にして em ベースのメディア クエリを解釈します。まったく意味がありませんが、それが彼らのやり方です。したがって、ブレークポイントを 50em (*12px) に作成するには、ブレークポイントを 37.5em (*16px、ブラウザのデフォルト) に設定する必要があります。ベースの font-size を渡すと、その調整が可能になります。

これはより適切に文書化されるべきであり、引数はより適切に命名されるべきです。GitHub に問題を作成しました。

于 2012-09-21T15:23:56.603 に答える