web-dev-qa-db-ja.com

レスポンシブアプリ：emとpx、ptとパーセントのフォントサイズ単位

HTML、CSSを使用してデスクトップ、タブレット、携帯電話をターゲットにしたレスポンシブアプリを作成していますが、どのサイズのフォントをどのサイズの画面にうまく合わせることができるか、わかりません。 em、px、pt、percentの違いは何ですか？私にとって最適なものは何ですか？

デスクトップ、タブレット、携帯電話向けのレスポンシブアプリでの実際の体験を聞きたい

助けてくれてありがとう！

htmlcssresponsive-design
18
dextervip

あなたはこの記事を見てみたいかもしれません： 小さなリンク 。

更新：これがあなたの場合にどのように適用されるかについての小さな説明があります：

  • px：ピクセルは、一度に1色のみを表示できるデバイスのディスプレイの（通常）小さな正方形です。 画面の解像度 は、画面/ディスプレイを構成するピクセル数を指定します。したがって、font-size: 12px;を指定すると、基本的には、各文字の高さが12ピクセルになるようにブラウザに通知します（およそ-異なる文字の高さは少し異なりますが、相対的な違いは保持されます）。
  • percentages：font-size: 50%;は、要素のフォントサイズを親要素のフォントサイズの50％に設定します。
  • pt：1pt（ポイント）は1/72インチです。 font-size: 12pt;を設定すると、文字の高さが12/72インチに設定されます（ここでも、異なる文字は少し異なります）。
  • em：emは、選択した書体の文字「m」の幅です。1emが100%であり、1.5emが150%であることを除いて、基本的にパーセンテージと同じです。

したがって、テキストサイズと他のサイズの要素の論理的な比率を維持するため、おそらくpxを選択します。

20
Chris

さまざまな寸法があります

  1. 「Ems」（em）：「em」はスケーラブルな単位です。 emは現在のfont-sizeと同じです。たとえば、ドキュメントのfont-sizeが12ptの場合、1emは12ptと等しくなります。 Emsは本質的にスケーラブルであるため、2emは24pt、.5emは6ptなどになります。
  2. パーセント（％）：パーセント単位は「em」単位によく似ており、いくつかの基本的な違いを除けばです。何よりもまず、現在のフォントサイズは100％です（つまり、12pt = 100％）。パーセント単位を使用している間、テキストはモバイルデバイスとアクセシビリティのために完全にスケーラブルなままです。
  3. ピクセル（px）：ピクセルは、スクリーンメディアで使用される固定サイズの単位です（つまり、コンピューター画面で読み取られます）。ピクセル単位の1つの問題は、スケーリングしないことです。
  4. ポイント（pt）：ポイントは、伝統的に印刷メディア（紙などに印刷されるもの）で使用されます。 1ポイントは1/72インチに相当します。ポイントは固定サイズの単位であり、サイズを調整できないという点で、ピクセルによく似ています。
  5. ビューポート単位：-これらはビューポートを基準にしています。 CSS3の新機能です。
    1. 3.2vw =ビューポートの幅の3.2％
    2. 3.2vh =ビューポートの高さの3.2％
    3. 3.2vmin = 3.2vwまたは3.2vhの小さい方
    4. 3.2vmax = 3.2vwまたは3.2vhの大きい方

kyleschaeffer.com/.... および css-tricks.com/.... を参照してください

しかし、レスポンシブなタイポを実現するには、 https://stackoverflow.com/a/21981859/406659 を見てください。

4
aWebDeveloper

ここに記載されている のように、着信remユニットとvminユニットが最適だと思います。

古いブラウザに対処するために、CSSフォールバックを次のように定義しておくことができます。

p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

または

p, li
{
  font-size: 12px;    /* old */
  font-size: 1.2vm;   /* IE9 */
  font-size: 1.2vmin;
}

（クレジット クレイグバトラー ）

3
ErichBSchulz

Px、em、およびremを組み合わせて使用​​してみてください。

Chris Coyierがこの投稿で説明しています ドキュメントにpx、モジュール（つまり、ページのセクション）にrem、モジュール内のテキスト要素にemを使用すると、ページはきれいに拡大縮小されます。

2
Jim Clouse