柔軟な測定単位を使用することに慣れているかもしれませんが、rememをいつ使用するかを完全に理解していない可能性があります。 このチュートリアルでは、あなたがそれを把握するのに役立ちます！

emrem1em1rem16px160pxま

On the other hand px values are used by the ブラウザはそのままなので、1px1px。

このCodePenの例でスライダーを試してみて、remempxユニットのサイズが固定されたままであることを確認してください。

大きな質問

rememandremユニットは、固定サイズで立ち往生するのではなく、設計の柔軟性と要素を上下にスケールする機能を提供します。 この柔軟性を利用して、開発中のデザインの調整を容易にし、応答性を高め、ブラウザユーザーがサイトの全体的な規模を制御して読みやすくすることが

両方emrememrem値を使用すべきかです。

決定的な違い

emrempxremememremユニットを使用する必要があるのかに進みます。

最後に、各タイプのユニットを使用する典型的なデザインの要素を正確に実用的に適用する方法を見ていきます。

rem単位がピクセル値にどのように変換されるか

remhtmlrem16px10rem160px、つまり10×16=160に相当します。P>

は160pxに計算します

em単位がピクセル値にどのように変換されるか

em単位を使用すると、ピクセル値はスタイ

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:em単位は親要素のフォントサイズに相対的であるという誤解がやや広まっています。 実際、W3仕様に従って、それらは「それらが使用されている要素の」フォントサイズに相対的です。

親要素のフォントサイズはem値に影響を与える可能性がありますが、それが発生した場合は継承のみが原因です。 その理由を見て、これが実際にどのように機能するかを見てみましょう。

emユニットに対する継承の効果

empxvwのように、継承の対象とならない単位でフォントサイズを明示的に設定することによってのみ上書き

emem値がその親のフォントサイズによって影響される可能性があります。

例を見てみましょう。 私たちはそれをステップとして自分のためにCodePenでこれを試してみて自由に感じます。 進むにつれて、Chrome Developer ToolsまたはFirebug for Firefoxを使用して、em単位が計算されるピクセル値を検査します。

em継承の例

ルートフォントサイズが16px1.5emのパディングを持つ子divがある場合、そのdivはルート要素から16px24px、つまり1.5×16=24に変換されます。次に、最初のdivの周りに別のdivをラップし、そのfont-size1.25emに設定した場合はどうなりますか？私たちのラッパー divは、16pxfont-size1.25emの設定で乗算します。 これにより、divのフォントサイズが20px、つまり1.25×16=20に設定されます。これで、元のdivはルート要素から直接継承されなくなり、代わりに新しい親divから20px20px1.5em30px、つまり1.5×20=30に相当します。

このスケーリング効果は、元のdivにem1.2emとしましょう。divは親から20px1.2em24pxの新しいフォントサイズ、つまり1.2×20=24を与えます。divの1.5em36px、つまり1.5×24=36

最後に、em1.5em14pxのフォントサイズを使用するようにdivを明示的に設定した場合、継承の対象ではない値です。これで、パディングは21px、つまり1.5×14=21に低下しました。 これは、親要素のフォントサイズの影響を受けません。

このような複雑さの可能性があるため、emユニットを管理しやすい方法で使用する方法を知ることが重要な理由がわかります。

HTML要素のフォントサイズに対するブラウザ設定の影響

デフォルトでは、ブラウザのフォントサイズは通常16pxですが、これはユーザーが9pxから72pxまでの任意の場所に変更することができます。p>

知っておくことが重要:

ルートhtmlhtmlremrememユニットの値に影響を与えることができます。

ブラウザ設定効果HTMLフォントサイズが設定されていない場合

オーバーライドされない限り、htmlfont-sizehtml要素に設定されていないサイトを見てみましょう。

ユーザーがデフォルトのフォントサイズ16pxのブラウザを持っている場合、ルートフォントサイズは16pxになります。 Chrome開発者ツールでは、計算されたタブの下に継承されたプロパティを表示をチェックすることで、要素が継承したものを見ることができます。この場合、10rem160px、つまり10×16に相当します=160

ユーザーがブラウザのフォントサイズを18pxまでバンプすると、ルートフォントサイズは18pxになります。 これで、10rem180px、つまり10×18=180に変換されます。

em単位のHTMLフォントサイズでブラウザ設定効果

emem

em単位のHTMLフォントサイズでブラウザ設定効果

emベースのフォントサイズが設定されている場合html要素では、変換されるピクセル値はブラウザのフォントサイズ設定の倍数になります。たとえば、サイトのhtmlfont-size1.25em16px20px、つまり1.25×16=20として出力されます。この場合、10rem200px、つまり10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=10×20=200ただし、ブラウザのフォントサイズが20px25px、すなわち、 1.25×20=25P>

今10rem250px、すなわち10×25=250

emとremの違いを要約する

上記のすべてがこれです：

• 

  emとremの違いを要約する

  上記のすべてがこれです：

  • 

    remピクセル値への単位は、html要素のフォントサイズによって決定されます。 このフォントサイズは、継承の対象とならない単位で明示的に上書きされない限り、ブラウザのフォントサイズ設定からの継承の影響を受けます。

  • em単位のピクセル値への変換は、使用されている要素のフォントサイズによって決まります。 このフォントサイズは、継承の対象ではない単位で明示的にオーバーライドされない限り、親要素からの継承の影響を受けます。

  なぜremユニットを使用するのですか:

  remrempxユニットを使用して、ユーザーのフォントサイズ設定がサイトのレイアウトのすべての側面に影響を与える方法を提供するということです。

  このため、rem単位を使用する主な目的は、ユーザーがブラウザに設定したデフォルトのフォントサイズが何であれ、レイアウトがその中のテキ

  サイトは、最初は16pxの最も一般的なデフォルトのブラウザのフォントサイズに焦点を当てて設計することができます。

  

  しかし、remユニットを使用すると、ユーザーレイアウトは保持され、テキストは小さなテキスト用の剛性のあるスペースに押しつぶされることはありません。

  

  ユーザーがフォントサイズを小さくすると、レイアウト全体がスケールダウンし、空白の荒れ地に小さなテキストが残されることはありません。

  

  ユーザーは、サイズと視聴距離が大幅に異なる可能性のあるデバイ これらの設定を収容することは大いによりよいユーザーの経験を可能にする。P>

  知っておくべき重要なこと

  :

  一部のデザイナーは、rempxfont-sizehtmlhtmlhtml要素がユーザーのブラウザ設定から継承するフォントサイズを上書きするため、これに対して強くお勧めします。 したがって、これは、任意の効果を持っているから設定を防止し、最高の視聴のために最適化するユーザーの能力を削除します。

  htmlemremhtml要素のフォントサイズを変更することでデザインを上下にスケールすることができますが、ユーザーのブラウザ設定の効果は保

  emユニットを使用する理由

  キー値emhtml要素以外のフォントサイズで決定できる

  このため、empaddingmarginline-heightemの値を使用することができます。

  

  このようにして、メニューのフォントサイズを変更すると、メニュー項目の周りの間隔は、レイアウトの残りの部分とは無関係に、比例して拡大縮小されます。

  

  継承に関する以前のセクションでは、ememユニットのみを使用することをお勧めします。

  実用的なアプリケーション

  webデザイナーの間でいくつかの議論があるかもしれませんし、私は別の人々が異なる好ましいアプローチを持ってい

  em単位を次の場合に使用します。

  ルート以外の要素のフォントサイズに応じて拡大縮小する必要がある任意のサイズ変更。一般的に言えば、em単位を使用する必要がある唯一の理由は、デフォルト以外のフォントサイジングを持つ要素をスケールすることです。

  上記の例のように、メニュー項目、ボタン、見出しなどのデザインコンポーネントは、明示的に指定されたフォントサイズを持つことができます。 これらのフォントサイズを変更する場合は、コンポーネント全体を比例して拡大縮小する必要があります。このガイドラインが適用される一般的なプロパティは、marginpaddingwidthheightline-heightpaddingwidthwidthheightline-heightwidth既定以外のフォントサイズを持つ要素で使用される場合。

  emremユニットで設定することをお勧めしますスケーラビリティを維持しますが、継承の混乱を避けます。

  通常、フォントサイズにemユニットを使用しないでください

  emremempxremhtml要素のフォントサイズの調整が行われた場合、見出しのサイズも拡大縮小されます。このCodePenのhtmlemフォントサイズを変更してみてください:

  多くの場合、いくつかの例外を除いて、ルート以外の要素に基づいてフォントサイズを拡大縮小したくありません。

  emベースのフォントサイジングが必要な例は、最初のレベルのフォントサイズに応じて2番目のレベルのメニュー項目のテキストのサイ 別の例としては、ボタン内で使用されるフォントアイコンがあり、アイコンのサイズはボタンのテキストサイズに関連している必要があります。ただし、webデザインのほとんどの要素はこのタイプの要件を持たない傾向があるため、一般的には、フォントサイズ設定にはremem単位を必要としないサイズ設定で、ブラウザのフォントサイズ設定に応じてスケールする必要があります。

  rem単位を使用してください。

  em単位を必要としないサイズ設定では、ブラウザのフォントサイズ設定に応じてスケールする必要があります。

  これは、ほとんどの高さ、ほとんどの幅、ほとんどのパディング、ほとんどの余白、境界線の幅、ほとんどのフォントサイズ、影、基本的にレイアウトのほ簡単に言えば、rem単位でスケーラブルにできるものはすべて、そうでなければなりません。

  ヒント

  レイアウトを作成するときは、ピクセル単位で考える方が簡単ですが、rem単位で出力されます。Pxtoremプラグインを使用して、Stylus/Sass/Lessのようなプリプロセッサ、またはPostCSSのようなポストプロセッサを介して自動的に計算を行うことができます。または、pxtoemを使用して手動で変換を行うこともできます。

  常にremメディアクエリ

  重要なことは、remremユニットにする必要があります。 これにより、ユーザーのブラウザのフォントサイズが何であれ、メディアクエリがそれに応答してレイアウトを調整することが保証されます。

  たとえば、ユーザーがテキストを非常に高くスケールアップする場合、レイアウトは、より小さなスクリーニングされたモバイルデバイス上のように、二つの列から単一の列にスナップダウンする必要があるかもしれません。

  ブレークポイントが固定ピクセル幅の場合、異なるビューポートサイズのみがトリガーできます。 しかし、remベースのブレークポイントでは、異なるフォントサイジングにも応答します。p>

  emまたはremを使用しないでください。

  emまたはremを使用しないでください:

  マルチ列レイアウト幅

  レイアウト内の列幅は、通常、予期しないサイズのビューポートに流動的に収まるように、%remmax-width設定を介して組み込む必要があります。たとえば、次のようにします。

  .container { width: 100%; max-width: 75rem;}

  これは、列を柔軟かつスケーラブルに保ちますが、その中のテキストが快適に読みやすくなるために広すぎ

  要素が厳密にスケーリングできない場合

  典型的なwebデザインでは、スケーラビリティのために設計できないレイアウトの多くの部分はあ しかし、スケーリングを防ぐために明示的な固定値を実際に使用する必要がある要素に遭遇することがあります。

  固定サイズ値を使用するための前提条件は、問題の要素がスケーリングされた場合、それが壊れることでなければなりません。 これは実際には頻繁には発生しないため、これらのpxユニットを削除する前に、それらを使用することが絶対必要かどうか自

  ラップアップ

  私たちがカバーしたものの簡単な箇条書きの要約を持ってみましょう：

  • remem単位は、デザイ
  • em単位は、使用されている要素のフォントサイズに基づいています。
  • remhtml要素のフォントサイズに基づいています。
  • em単位は、任意の親要素からのフォントサイズの継承によって影響される可能性があります

  • rem単位は、ブラウ

  • emルート以外の要素のフォントサイズに応じてスケーリングする必要があるサイズ変更の単位を使用します。
  • 使用remem単位、およびそれはブラウザのフォントサイズの設定に応じてスケー
  • フォントサイズを含むemrem単位を使用します。
  • メディアクエリでremユニットを使用する
  • マルチ列レイアウト幅でemrem%を使用してください。
  • スケーリングが避けられないようにレイアウト要素を壊す場合は、emrememremユニットが動作するかの堅牢で完全な画像を構築し、それを通してあなたのデザイ

    このチュートリアルに含まれている使用ガイドラインを自分で試してみて、作成できるレイアウトの本格的なスケーラビリティと応答性をお楽