2

たとえば、RWD ブレークポイントを SASS の変数として設定しています$bp-medium: 48em;(1em = 16px の場合は 768px に相当)。また、それよりも1 ピクセル小さい変数を設定し、その変数の値を ems で設定して、ブレークポイントがユーザーの基本サイズ設定を引き続き尊重できるようにしたいと考えています。

SASS は確かに計算ツールを提供していますが、私が試したすべての方法は、ユーザーがブラウザーのデフォルトのフォント サイズを何ピクセルに設定しているかを推測する必要があることに依存しています。例えば：

$bp-medium-1: ($bp-medium/1em)*16px-1px;

…$bp-medium-1 に 767px の値を与える (結果が px 単位であるため、すべてのオプションの中で最悪)、または

$bp-medium-1: $bp-medium - (1em/16);

…これにより、$bp-medium-1 の値は 47.9375em になります。少なくとも結果が ems になっているため、より良い結果が得られます。

要約する48em - 1pxと、最終結果はemであり、16px / emの基本サイズを想定する必要はありません。

これはできますか？

4

1 に答える 1

1

いいえ、あなたがすることはできません。em や px などの互換性のない単位で算術演算を実行できる唯一の方法はcalc()、CSS (Sassではない) を使用することであり、メディア クエリでは許可されていません。

特定の値よりも小さい (精度の設定に基づく) 可能な最大の小数を使用できます。

// default precision in Sass is 5 decimal places
// go any bigger and Sass will round up
@media (max-width: 34.99999em) {
    body {
        background: red;
    }
}

@media (min-width: 35em) {
    body {
        background: green;
    }
}
于 2015-08-01T16:09:05.410 に答える