CSSのメディアクエリは、ブラウザではなくhtmlドキュメントのemサイズを使用しますか？

Question

私は、ウィンドウの幅に基づいてチャンク内の要素の幅を変更するためにメディアクエリを使用しようとしています（これにより、列の幅を変更せずにページ上の列の数を増やすことができます）。私はあなたのフォントサイズを変更する場合、すべてが右に見えるようにピクセルの代わりにemを使用してこれを行うことができるようにしたいと思います。私は、次の使用している場合しかし、：ウィンドウの最小幅は42 * 16pxに、私のブラウザ（Safariなど）のデフォルトのフォントサイズに達したときに

html { 
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/ 
} 

@media screen and (min-width: 42em) { 
    div#page { 
     width: 42em; 
    } 
} 

メディアクエリは、トリガされますしばらくのdiv＃の幅ページは42 * 12pxになり、html要素からフォントサイズを継承します。私は実際に私が使用しているテキストの幅に基づいてトリガーするメディアクエリが好きです、その作業を行う方法はありますか？

Answer 1

を参照してください。メディアクエリで、メディアクエリでは、」相対的な単位は単位が宣言の結果に基づいてされることはありませんことを意味し、初期値に基づいているので、いいえ、あなたは、することはできません。たとえば、HTMLでは、 'em'単位は 'font-size'の初期値からの相対値です。 "（Media Query spec、6 Units） font-sizeの初期値はmediumで、ブラウザに依存した方法で物理サイズにマップされます（CSSで設定できるものとは関係ありません）。

結論は、フォントサイズの設定方法によって異なります。ルート要素のフォントサイズをピクセル単位で設定する場合は、emを使用しても柔軟性がないため、メディアクエリでピクセルを使用することは論理的です。ルート要素のフォントサイズを百分率で設定すると、メディアクエリでemを使用するのが理にかかりますが、emはブラウザのデフォルトのフォントサイズを意味するため、emの乗数を選択する必要があります。

Answer 2

From W3C（http://www.w3.org/TR/CSS21/syndata.html）
'em'単位は、要素の 'font-size'プロパティの計算値と同じですそれは使用されます。 'font-size'プロパティ自体の値に 'em'がある場合の例外はです。この場合、は親要素のフォントサイズを参照します。

html { font-size:1em; width:42em; } 
body { font-size:1.6em; } 

@media screen and (max-width:40em) { 
    div#page { font-size:0.875em; } /* 14px font */ 
} 

注：おそらく42emがブラウザウィンドウの幅の100％になることはありません。 @mediaを異なる画面幅の異なる動作に変更した場合は、、(max-width:1024px)とすれば、おそらく後になっていると思われる効果が増えます。

Answer 3

私はちょうど同じことを考えており、AFAIKはブラウザー/デバイスの "ネイティブ"フォントサイズを変更する方法がありません。しかし、あなたがそれをある方法で見るなら、これは実際には良いことです。

media-queryとhtmlタグは、任意のデバイスまたはブラウザで同じベース番号を参照しています（デスクトップブラウザの場合は16ピクセルですが、異なる場合もあります）ユーザーがズームを変更した場合）。

この値のパーセンテージまたはem-measure（12pxのデスクトップ相当の場合、75％または0.75emを使用）でhtmlテキストサイズを設定し、ピクセルを分割することに基づいてメディアクエリを設定すると（960pxのデスクトップ換算値で60emを使用）、すべてのズームレベルですべてのデバイスにすべてが配置されるはずです。

もこのlink