8

メディアクエリを使用して、ウィンドウの幅に基づいて要素の幅をチャンクで変更しようとしています（これにより、列の幅を変更せずにページの列の数を増やすことができます）。フォントサイズを変更してもすべてが正しく見えるように、ピクセルの代わりにemを使用してこれを実行できるようにしたいと思います。ただし、以下を使用する場合：

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;
    }
}

メディアクエリは、ウィンドウの最小幅がブラウザ（Safari）のデフォルトのフォントサイズである42 * 16pxに達するとトリガーされ、div＃pageの幅は42 * 12pxになり、html要素からフォントサイズを継承します。 。使用しているテキストの幅に基づいてメディアクエリをトリガーしたいのですが、それを機能させる方法はありますか？

4

3 に答える 3

5

いいえ、できません。メディアクエリでは、「メディアクエリの相対単位は初期値に基づいています。つまり、単位は宣言の結果に基づいていません。たとえば、HTMLでは、「em」単位は「font-size」の初期値を基準にしています。」（メディアクエリ仕様、条項6ユニット）。の初期値はfont-sizeですmedium。これは、ブラウザーに依存する方法で物理サイズにマップされます（CSSで設定できるものとは関係ありません）。

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

于 2014-06-11T21:15:27.460 に答える
4

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％になることはありません。(max-width:1200px)@mediaを変更して、画面の幅が異なると動作が異なる(max-width:1024px)場合は、おそらく、より多くの効果が得られると思います。

于 2011-02-14T13:44:27.033 に答える
1

私はちょうど同じことを調べていましたが、ブラウザ/デバイスの「ネイティブ」フォントサイズを変更する方法はありません。しかし、これは、特定の方法で見れば実際には良いことです。

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

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

このリンクも参照してください

于 2012-06-29T10:55:01.800 に答える