20

I am building a responsive app targeted to desktop, tablet and mobile phone using HTML and CSS but I am not sure what unit font size should I use that the font fits well in any size screen. What's difference between em, px, pt and percent? What's the best choose for me?

I would like to hear real experiences about it in responsive apps for desktop, tablets and mobile phones

I would be thankful for any help!

4

4 に答える 4

23

この記事をご覧になることをお勧めします: little link .

更新:これがあなたのケースにどのように適用されるかについてのちょっとした説明があります:

  • px : ピクセルは、(一般に) デバイスのディスプレイに表示される小さな正方形で、一度に 1 つの色しか表示できません。画面解像度は、画面/ディスプレイが何ピクセルで構成されているかを示します。したがって、: を指定するfont-size: 12px;と、基本的に、各文字の高さを 12 ピクセルにする必要があることをブラウザーに伝えます (おおよそ、文字によって高さが多少異なりますが、相対的な違いは保持されます)。
  • パーセンテージ:font-size: 50%;要素のフォント サイズを親要素のフォント サイズの 50% に設定します。
  • pt : 1pt(ポイント) は 1/72 インチです。設定font-size: 12pt;により、文字の高さが 12 / 72 インチに設定されます (繰り返しますが、文字によって少し異なります)。
  • em1em : em は、選択した書体の文字 'm' の幅であり、 is100%と1.5emisを除いて、基本的にパーセンテージと同じです150%。

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

于 2012-09-04T20:56:54.197 に答える
5

Various dimensions are

  1. “Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..
  2. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
  3. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One problem with the pixel unit is that it does not scale.
  4. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
  5. Viewport units : - These are relative to the view port. They are new in CSS3
    1. 3.2vw = 3.2% of width of viewport
    2. 3.2vh = 3.2% of height of viewport
    3. 3.2vmin = Smaller of 3.2vw or 3.2vh
    4. 3.2vmax = Bigger of 3.2vw or 3.2vh

see kyleschaeffer.com/.... and css-tricks.com/....

But to achieve responsive typo look at https://stackoverflow.com/a/21981859/406659

于 2014-02-24T08:04:44.987 に答える
3

here に記載されているように、着信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;
}

（クレイグ・バトラーの功績）

于 2013-04-10T10:22:05.857 に答える
2

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

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

于 2014-04-16T16:38:32.147 に答える