BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSSの単位はpxとremのどちらを使うべきですか？[クローズド］

2022-03-21 16:21:28

質問

新しいウェブサイトをデザインしているのですが、できるだけ多くのブラウザやブラウザ設定に対応させたいと思っています。フォントや要素のサイズに使用する単位を決めかねているのですが、決定的な答えが見当たりません。

質問です。 px または rem をCSSに追加することはできますか？

  • これまでのところ、私が知っているのは px は、ブラウザでベースのフォントサイズを調整するユーザーと互換性がありません。
  • を無視した em と比較して、メンテナンスが面倒だからです。 rem のように、カスケードするためです。
  • という意見もあります。 rem は解像度に依存しないので、より望ましい。しかし、ほとんどのモダンブラウザはすべての要素を等しく拡大するので px は問題ない。

CSSで距離を測るのに何が一番望ましいか、いろいろな意見があり、どれが一番いいのか分からないので質問させていただきました。

どのように解決するのですか？

TL;DR。 使用 px .

事実関係

  • まず、極めて重要なこととして 仕様につき は、CSSの px ユニット はありません。 は、物理的なディスプレイの1画素に相当します。 これには 常に 1996年当時もそうでした。 CSS 1仕様 .

    CSSでは 参照ピクセル これは、96 dpiのディスプレイにおけるピクセルの大きさを測定するものです。 96dpiと大きく異なるdpiを持つディスプレイ（Retinaディスプレイなど）では、ユーザーエージェントが px の単位で、参照画素と同じ大きさになるようにします。 つまり、CSSの1ピクセルがRetinaディスプレイの物理的な2ピクセルに相当するのは、この再スケーリングのためなのです。

    とはいえ、2010年までは（モバイルのズーム事情はともかくとして）、このように px 広く普及しているディスプレイはすべて96dpi程度だったため、ほぼ常に1物理ピクセルに相当します。

  • で指定されたサイズ em は相対値 親要素に対して . このことから em の「複合問題」（ネストした要素がだんだん大きくなったり小さくなったりすること）です。 例えば 

      body { font-size:20px; } 
  div { font-size:0.5em; }

    与える。 

      <body> - 20px
      <div> - 10px
          <div> - 5px
              <div> - 2.5px
                  <div> - 1.25px

  • CSS3 の rem これは常にルートに対してのみ相対的です。 html 要素でサポートされるようになりました。 使用されている全ブラウザの99.67%は .

意見書

視覚障がい者への配慮など、万人に受け入れられるページデザインが良いというのは、誰もが認めるところでしょう。 そのような配慮のひとつに（それだけではありませんが！）、ユーザーがサイトのテキストを大きくして読みやすくできるようにすることがあります。

当初、ユーザーが文字サイズを変更できるようにするには、相対的なサイズ単位を使用する方法しかありませんでした（たとえば em s). これは、ブラウザのフォントサイズメニューが、単にルートフォントサイズを変更するだけのものだったからです。 そのため、フォントサイズを px ブラウザのフォントサイズオプションを変更しても、拡大縮小されることはありません。

最近のブラウザは（そうでないIE7も）、画像やボックスのサイズも含めて、デフォルトのスケーリング方法をすべて単純にズームインするように変更しました。 基本的には、参照ピクセルを大きくしたり小さくしたりするのです。

確かに、ブラウザのデフォルトのスタイルシートを変更してデフォルトのフォントサイズを調整することはできますが（旧来のフォントサイズオプションに相当）、それは非常に難解な方法であり、誰もそれを実行しないと思います。 1 を実行します。 (Chromeでは、詳細設定→Webコンテンツ→フォントサイズに埋もれています。 IE9では、さらに隠されています。 Altキーを押しながら、「表示」→「文字サイズ」を選択する必要があります)。 ブラウザのメインメニューにあるズームオプションを選択する方がはるかに簡単です。 Ctrl + + / - /mouse wheel)です。

1 - 統計的誤差の範囲内、当然

ほとんどのユーザーがズームオプションを使用してページを拡大縮小すると仮定すると、相対的な単位はほとんど関係ないと思います。 すべてが同じ単位で指定されていれば（画像はすべてピクセルで扱われます）、ページを開発するのはずっと簡単ですし、複利計算の心配をする必要もありません。 ( "I was told there be no math" - 1.5emの計算をする必要があります)。

フォントサイズに相対的な単位のみを使用することのもう一つの潜在的な問題は、ユーザーがサイズ調整したフォントがレイアウトの前提を崩す可能性があることです。 たとえば、テキストが切り取られたり、長すぎたりする可能性があります。 絶対単位を使用すれば、予期しないフォントサイズによってレイアウトが崩れる心配はありません。

ですから、私の答えは、ピクセル単位を使うことです。 私が使っているのは px をすべて使用します。 もちろん、状況は様々でしょうし、どうしてもIE6をサポートしたい場合（RFCの神様の慈悲がありますように）には em はとにかく

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します