6

emレスポンシブ画像で使用される場合、ブラウザーはどのようにユニットを理解できますか?

<img alt="A giraffe" src="giraffe.jpg"
     srcset="giraffe@1.5x.jpg 600w, giraffe@2x.jpg 800w, [etc.]"
     sizes="(max-width: 40em) 40em">

これは検証済みで、ブラウザ コンソールに警告は表示されません。しかし、画像プリローダーの要点が、CSS がダウンロードされて解析される前に画像を取得することである場合、ブラウザーは何のために使用するのemでしょうか?

font-sizeそれが適用されるのはデフォルトだけ<html>ですか？rem明確にするために使用する必要がありますか？ユーザーがズームすると、2 つに違いはありますか?

これは理論上の話ではありません。私はメディアクエリでブレークポイントを使用emしていますが、一部の画像は、最適な行の長さのサイズのコンテナーによって制限されています (もちろん、を使用してemいます)。

スペックを確認しましたが、新しいレスポンシブ画像機能については非常に簡潔です。

4

2 に答える 2

6

私は W3C の公式チャットルーム #respimg に参加している人々の耳を傾けました。

<Tigt> 申し訳ありませんが、 <TabAtkins>em内で が使用された場合に がどのように解釈されるかについて質問がありましたsizes
。Tigt: メディア クエリと同じです。初期のフォント サイズに相対的です。
<TabAtkins> (<html> のフォント サイズではなく、ユーザーの個人設定で設定された初期フォント サイズです。)

<Wilto> の を変更していない限り、ほぼどこでも 16pxfont-sizeですhtml。
<TabAtkins> Tigt: rem はここでは em と同じように扱われます。

したがって、高速読み取りは次のとおりです。

  • sizesまたは メディア クエリで使用される場合、emとremはどちらも「ユーザーのデフォルトfont-size.
  • CSS が変更された場合、ページ上で画像がどのようにレイアウトされるかを制御する実際のemまたはrem
  • これは、画像プリローダーに真実の情報を提供したい場合は、デフォルトのサイズを変更すべきではないことを意味しますem

W3C メディア クエリ:

このメディア クエリは、ビューポートの幅が 20em を超える場合、スタイル シートが画面およびハンドヘルド デバイスで使用できることを表します。

 @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

「em」値は、「font-size」の初期値に相対的です。

于 2015-06-05T20:17:33.477 に答える
-1

5.1.1. フォント相対長さ: 'em'、'ex'、'ch'、'rem' 単位

'rem' (ルート要素のフォントサイズを参照) は別として、フォント相対長は、それらが使用される要素のフォント メトリックを参照します。例外は、'font-size' プロパティ自体の値で発生する場合です。この場合、親要素の計算されたフォント メトリック (または 'font' プロパティの初期値に対応する計算されたフォント メトリック) を参照します。 、要素に親がない場合)。

em単位

それが使用されている要素の 'font-size' プロパティの計算値に等しい。
http://www.w3.org/TR/css3-values/#font-relative-lengths

emcss 単位は、現在の要素のフォント サイズと同じです。font-sizeプロパティは継承されます。したがって、要素 (imgこの場合) は、プロパティの 40 倍に従ってサイズ変更されfont-sizeます。ユーザーがページをズームすると (フォント サイズが大きくなります)、em単位はfont-sizeプロパティの更新に自動的に更新されます。

基本フォント サイズはブラウザーによって決定されます。ブラウザーが Mac 上の Windows で実行されていて、ユーザーがフォント サイズを変更していない場合、基本フォント サイズは 16px (通常) になります。Linux、BSD、またはその他のシステムでは、フォント サイズはデスクトップ環境によって設定され、異なる場合があります。

したがって、控えめに言って、フォント サイズは 16 ピクセルであると想定できますが、多くの場合は間違っています。

于 2015-06-04T20:16:46.983 に答える