4

remChrome メディア クエリでユニットを使用することは可能ですか?

remユニットは Chrome で問題なく動作しますが、メディア クエリではサポートされていないようです。これは可能ですか？または、この CSS に何か問題がありますか?

body { background-color: yellow; }

@media only all and (max-width: 40rem) {
    body { background-color: red; }
}

@media only all and (min-width: 40rem) and (max-width: 60rem) {
    body {background-color: green;}
}

@media only all and (min-width: 60rem) {
    body { background-color: blue; }
}

http://jsfiddle.net/jsQ2N/2/show/でライブ、http://jsfiddle.net/jsQ2N/3/show/でemのみのバージョン。

4

3 に答える 3

12

仕様remでは、両方となどの相対単位について次のように述べていemます。

メディア クエリの相対単位は初期値に基づいています。つまり、単位は宣言の結果に基づいていません。たとえば、HTML では、「em」単位は「font-size」の初期値に相対的です。

( の初期値はfont-sizeですmedium。これは通常、ブラウザのユーザー設定で設定されているデフォルトのフォント サイズと同じです。)

Media Queries 3 は、上記の相対単位に関する引用以外に、特定の単位に対して特別なルールを定義していないため、 のように動作し、 の初期値を処理するrem 必要があります。Chrome で動作しない場合は、おそらくバグです。emfont-size

于 2012-08-30T16:06:36.160 に答える
5

これはWebkitの問題＃78295（2012-08の時点で未解決）であることが判明しました：メディアクエリでのCSS remユニットのサポート（ http://fvsch.com/code/bugs/rem-mediaquery/経由）。

于 2012-08-30T16:10:34.173 に答える
0

以下の回答を投稿した後、この質問は私を悩ませました。私が取り組んでいるサイトで、Chrome でもう少しテストを行いました。rem が Chrome のバグであるという投稿は正しく、機能しないため、メディア クエリのためだけにピクセルに変更しています。

*あなたの質問に答えるために、rems は、メディア クエリを使用してコンテンツ領域の高さを調整するために私のために働いています。Chrome がブラウザの幅を解釈する方法は Firefox とは異なるようですが、これは rem ベースの問題ではありません。

rems と ems を使用するときは、font-size: 1em; を設定した後であることに注意してください。またはフォントサイズ: 16px; html または body 用。font-size: 1em; に固執する方向に傾いています。htmlタグに。これにより、ユーザーが使用しているデバイスに関係なく、ユーザーがデフォルトのフォントサイズに設定したものから機能するデフォルトが作成されます。Rem は 1em のルート値に相対的です。そのルート値はユーザーのデフォルトのフォントサイズによって与えられるため、すべてがユーザーのフォントサイズ設定に従ってスケーリングされ、デバイス/ピクセル密度に依存しない必要があります。

これは、ユーザーが「通常の」72 または 96 ピクセル/インチのデバイスを使用しているか、Retina (またはその他の高ピクセル密度画面) を使用しているかにかかわらず、すべてのデバイスが「相対的に」同じに見える必要があることを意味します。

于 2012-12-27T23:58:02.593 に答える