新しい Web サイトを設計していて、できるだけ多くのブラウザーとブラウザー設定と互換性を持たせたいと考えています。フォントと要素のサイズに使用する測定単位を決定しようとしていますが、決定的な答えを見つけることができません。
私の質問は: CSS でpxorを使用する必要がありますか?rem
px、ブラウザーで基本フォント サイズを調整するユーザーとの互換性がないことはわかっています。em比べて維持するのが面倒なので、 sを無視しました。remrems は解像度に依存しないため、より望ましいと言う人もいます。しかし、最新のブラウザーのほとんどはとにかくすべての要素を均等にズームするため、使用してpxも問題ないと言う人もいます。CSS で最も望ましい距離の尺度についてはさまざまな意見があり、どれが最適かはわかりません。
TL;DR:を使用しますpx。
まず、仕様ごとに、CSSpx単位は1 つの物理ディスプレイ ピクセルと等しくないことを知っておくことが非常に重要です。これは、1996 年のCSS 1 仕様でも常に当てはまります。
CSS は、96 dpi ディスプレイ上のピクセルのサイズを測定する参照ピクセルを定義します。96dpi とは大幅に異なる dpi を持つディスプレイ (Retina ディスプレイなど) では、ユーザー エージェントはpx単位を再スケーリングして、そのサイズが参照ピクセルのサイズと一致するようにします。つまり、この再スケーリングこそが、1 つの CSS ピクセルが 2 つの物理的な Retina ディスプレイ ピクセルに等しい理由です。
とはいえ、2010 年まで (そしてモバイル ズームの状況にもかかわらず)、px広く利用されているディスプレイはすべて 96 dpi 前後だったため、ほぼ常に 1 物理ピクセルに相当していました。
s で指定されたサイズは、親要素にem相対的です。これは、ネストされた要素が次第に大きくなったり小さくなったりする の「複合問題」につながります。例えば：em
body { font-size:20px; }
div { font-size:0.5em; }
私たちに与えます：
<body> - 20px
<div> - 10px
<div> - 5px
<div> - 2.5px
<div> - 1.25px
常にルート要素remのみに関連するCSS3は、現在使用中の全ブラウザの 99.67% でサポートされています。html
誰にでも優しく、目の不自由な人にも配慮したページ設計が良いというのは、誰もが認めるところだと思います。そのような考慮事項の 1 つ (ただし、それだけではありません!) は、ユーザーがサイトのテキストを大きくして読みやすくすることを許可することです。
当初、ユーザーにテキスト サイズをスケーリングする方法を提供する唯一の方法は、相対的なサイズ単位 ( ems など) を使用することでした。これは、ブラウザのフォント サイズ メニューが単純にルート フォント サイズを変更したためです。したがって、 でフォント サイズを指定しpxた場合、ブラウザのフォント サイズ オプションを変更しても、サイズは変更されません。
最新のブラウザー (およびそれほど最新ではない IE7 でさえも) はすべて、デフォルトのスケーリング方法を変更して、画像やボックス サイズを含むすべてのものを単純に拡大するようにしました。基本的に、それらは参照ピクセルを大きくしたり小さくしたりします。
はい、ブラウザのデフォルトのスタイルシートを変更してデフォルトのフォント サイズを微調整することもできますが (古いスタイルのフォント サイズ オプションと同等)、それは非常に難解な方法であり、私は誰もそれをしないと思います。(Chrome では、詳細設定、Web コンテンツ、フォント サイズの下に埋もれています。IE9 では、さらに隠されています。Alt を押して、[表示]、[テキスト サイズ] に移動する必要があります。)ブラウザのメイン メニュー (またはCtrl+ +/ -/ マウス ホイールを使用)。
1 - 当然、統計誤差の範囲内
ほとんどのユーザーがズーム オプションを使用してページをスケーリングすると仮定すると、相対単位はほとんど無関係であることがわかります。すべてが同じ単位で指定されている場合 (画像はすべてピクセル単位で処理されます)、ページの開発がはるかに簡単になり、複合について心配する必要がなくなります。( 「数学はないと言われました」 - 1.5em が実際にどのように機能するかを計算しなければならないことに対処しています。)
フォント サイズに相対単位のみを使用する場合のもう 1 つの潜在的な問題は、ユーザーがサイズ変更したフォントによって、レイアウトの想定が崩れる可能性があることです。たとえば、テキストが途切れたり、長くなりすぎたりする可能性があります。絶対単位を使用すると、予期しないフォント サイズによってレイアウトが崩れる心配はありません。
したがって、私の答えはピクセル単位を使用することです。私はすべてに使用pxします。もちろん、状況はさまざまです。IE6 をサポートする必要がある場合 (RFC の神々があなたを慈悲してくれることを願っています)、emとにかく s を使用する必要があります。
この記事pxでは、 、em、およびの長所と短所についてかなり詳しく説明していremます。
著者は最終的に、最良の方法はおそらく と の両方を使用することでpxありrem、px最初に古いブラウザーを宣言remし、新しいブラウザーを再宣言することであると結論付けています。
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
Webサイトのフォントサイズをプログラムする最良の方法は、の基本フォントサイズを定義し、その後宣言するbody他のすべてのフォントにem（またはrem）を使用することです。font-sizeそれは私が思う個人的な好みですが、それは私によく役立っており、よりレスポンシブなデザインを組み込むことも非常に簡単になりました。
remユニットを使用する限り、コードをプログレッシブにすることと、古いブラウザーのサポートを提供することのバランスをとることは良いことだと思います。 remユニットのブラウザサポートに関するこのリンクをチェックしてください。これはあなたの決定にかなりの助けになるはずです。
pt比較的固定されているという点で に似ていますが、準拠していないブラウザーがデバイスに依存する方法で rem処理する場合でも、ほとんどの場合 DPI に依存しません。ルート要素のフォント サイズによって異なりますが、Sass/Compass などを使用してこれを自動的に行うことができます。pxrempt
あなたがこれを持っていた場合：
html {
font-size: 12pt;
}
その後1remは常にそう12ptです。 remまたem、依存する要素と同じくらいデバイスに依存しません。一部のブラウザは仕様どおりに動作せず、px文字どおりに扱います。Web の昔から、1 ポイントは一貫して 1/72 インチ、つまり 1 インチは 72 ポイントと見なされていました。
準拠していない古いブラウザを使用していて、次の場合:
html {
font-size: 16px;
}
次に、1remデバイスに依存します。htmlデフォルトで継承される要素の場合、1emデバイス依存でもあります。 うまくいけば、デバイスに依存しない等価物が保証されるでしょう: 12pt、ここで.16px / 96px * 72pt = 12pt96px = 72pt = 1in
特定の単位に固執したい場合、計算を行うのはかなり複雑になる可能性があります. たとえば、.75em of html = .75rem = 9pt、および.66em of .75em of html = .5rem = 6pt。経験則:
pt絶対サイズに使用します。 これをルート要素に対して動的にする必要がある場合は、CSS を使いすぎています。Sass/SCSS のように、CSS にコンパイルできる言語が必要です。em相対的なサイズに使用します。「左側の余白を文字の最大幅にしたい」または「この要素のテキストを周囲よりも少しだけ大きくします」と言うことができると非常に便利です。 <h1>さまざまな場所に表示される可能性があるため、em でフォント サイズを使用するのに適した要素ですが、常に近くのテキストよりも大きくする必要があります。このように、 に適用されるクラスごとに個別のフォント サイズを用意する必要はありませんh1。フォント サイズは自動的に調整されます。px非常に小さいサイズに使用します。 非常に小さいサイズでptは、一部のブラウザでは 96 DPI でぼやけることがptありpxます。細い 1 ピクセルの境界線を作成したいだけの場合は、そう言ってください。高 DPI ディスプレイを使用している場合、これはテスト中に明らかではないため、いずれかの時点で汎用の 96 DPI ディスプレイでテストしてください。半分（しかし半分だけ）の皮肉な答え（残りの半分は、官僚主義の現実に対する痛烈な軽蔑です）：
使用する
すべてが常にブラウザ ウィンドウのサイズに合わせられます。
常にスクロールダウンを許可しますが、水平スクロールを無効にします。
本文の幅を静的な 50vh に設定し、親 div から浮動または分割する CSS をコーディングしないでください。(実際に似ているものをモックアップしようとすると、背景の gif を巧妙に使用すると、軌道から外れてしまう可能性があります。) また、テーブルのみを使用してスタイルを設定し、すべてが期待どおりの場所にしっかりと保持されるようにします。ユーザーが行う可能性のある ctrl+/- アクティビティを元に戻す JavaScript 関数を含めます。
ユーザーが使用しているものに基づいてサイトの流れが異なるわけではないため (携帯電話ではテキストが小さすぎて読めないなど)、ユーザーはあなたを嫌うでしょう。あなたの同僚はあなたを嫌うでしょう。彼らの正気の誰もこれをしないからです。これは良い考えではないため、プログラミングの教授はあなたを嫌うでしょう。UX デザイナーは、締め切りに間に合わせるために UX モックアップをデザインしなければならない手抜きが明らかになるので、あなたを嫌うでしょう。
物事をモックアップと一致させ、すぐにそうするように言う人を除いて、ほとんどの人があなたを嫌うでしょう. ただし、これらの人々 (通常はプロジェクト マネージャーを含む) は、あなたの正確さと迅速なターンアラウンド タイムに夢中になるでしょう。そして、誰もが自分の意見だけがあなたの給料にとって重要であることを知っています。
はい。というか、いいえ。
ええと、つまり、それは問題ではありません。特定のプロジェクトに適したものを使用してください。PX と EM、またはその両方が同等に有効ですが、ページ全体の CSS アーキテクチャによって動作が少し異なります。
アップデート：
明確にするために、通常はどちらを使用してもかまわないと述べています。場合によっては、特にどちらかを選択したい場合があります。ゼロから始めることができ、基本フォント サイズを使用して、すべてをそれに関連させたい場合は、EM が便利です。
PX は、再設計を既存のコード ベースに後付けする場合に必要になることが多く、悪いネスティングの問題を防ぐために px の特異性が必要です。