-1

私はしばらくsassを使用しており、メディアクエリに次のpx to em関数を使用してきました。

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em
}

ただし、画面の幅に応じて異なるベースフォントサイズを設定したいと考えています。たとえば、モバイルサイズの SO

$browser-context: 14; // Default

大きな画面の場合:

$browser-context: 16; // Default

しかし、これをすべてsassでまとめる方法がわかりません。何か案は？

ありがとう、

4

2 に答える 2

0

固定観念にとらわれずにSASSでこれを達成することはできないと確信しています。

ご存知のように、SASS はブラウザーに送信される前にコンパイルを行うため、その時点ではブラウザーはもちろん、画面サイズもわかりません。したがって、メディアクエリはアウトです。

あなたができること（私はここで理論化しています）は次のとおりです。

em 関数を設定して、さまざまなブラウザー幅に固有の一連のフォント サイズを生成します。

@function em780($pixels, $context: $browser-context) {
   @return #{$pixels/$context}em
}

と

@function em420($pixels, $context: $browser-context) {
   @return #{$pixels/$context}em
}

等

これにより、特定の画面幅ごとに正しい em サイズが生成されます。次に、通常のメディアクエリ内でそれらの em サイズを割り当てます

@media all and (max-width: 420px){
    h1{ font-size: $em420;
}

@media all and (max-width: 780px){
    h1{ font-size: $em780;
}

それは意味がありますか？

明らかに、ここに書いた「コード」をコピーしないでください。ただし、一般的な考え方が有効であることを願っています。

于 2013-10-09T09:27:41.140 に答える
0

これは私のミックスインです:

@function em($px, $base: 16px) {
  @return ($px / $base) * 1em;
}

font-size: em(24px); のように使用します。値を入力するよりも明確だと思います

于 2014-09-24T11:44:07.020 に答える