Html 响应式应用程序：哪些字体大小单位为 em vs. px vs. pt vs. percent

Responsive App: which font-size units em vs. px vs. pt vs. percent

提问by dextervip

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?

我正在使用 HTML 和 CSS 构建一个针对台式机、平板电脑和手机的响应式应用程序，但我不确定应该使用什么单位字体大小才能使字体适合任何尺寸的屏幕。em、px、pt 和百分比有什么区别？对我来说最好的选择是什么？

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!

我将不胜感激！

回答by Chris

You might want to take a look at this article: little link.

您可能想看看这篇文章：小链接。

Update:Here's a tiny bit of explanation about how this applies in your case:

更新：这里有一些关于这如何适用于您的情况的解释：

• px: a pixel is a tiny square (generally) in your device's display that can show only one color at a time. Your screen resolutionspecifies how many pixels your screen/display is made of. So when you specify: font-size: 12px;, you're basically telling the browser that each letter should be 12 pixels high (approximately -- different letters vary in height a bit, but the relative difference is preserved).
• percentages: font-size: 50%;sets the font size of your element to 50% of the font size of its parent element.
• pt: 1pt(point) is 1 / 72 of an inch. Setting font-size: 12pt;sets the height of your characters to 12 / 72 inches (again, different characters differ a bit).
• em: em is the width of the letter 'm' in the selected typeface, basically the same as percentage, except that 1emis 100%and 1.5emis 150%.

• px：像素是设备显示屏中的一个小方块（通常），一次只能显示一种颜色。您的屏幕分辨率指定了您的屏幕/显示器由多少像素组成。因此，当您指定: 时font-size: 12px;，您基本上是在告诉浏览器每个字母的高度应为 12 像素（大约 - 不同的字母在高度上略有不同，但保留了相对差异）。
• 百分比：font-size: 50%;将元素的字体大小设置为其父元素字体大小的 50%。
• pt: 1pt(point) 是 1 / 72 英寸。设置font-size: 12pt;将字符的高度设置为 12 / 72 英寸（同样，不同的字符略有不同）。
• em: em 是所选字体中字母'm'的宽度，与百分比基本相同，只是1em是100%和1.5em是150%。

So your choice would probably be pxsince it would preserve the logical proportions of text size to other sized elements.

因此，您的选择可能是px因为它会保留文本大小与其他大小元素的逻辑比例。

回答by aWebDeveloper

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

1. “Ems”(em)：“em”是一个可扩展的单位。一个em等于当前的font-size，比如文档的font-size是12pt，1em就等于12pt。Ems 本质上是可扩展的，所以 2em 等于 24pt，.5em 等于 6pt，等等。
2. 百分比 (%)：百分比单位很像“em”单位，除了一些基本差异。首先，当前字体大小等于 100%（即 12pt = 100%）。在使用百分比单位时，您的文本对于移动设备和可访问性保持完全可扩展。
3. 像素（px）：像素是固定大小的单位，用于屏幕媒体（即在计算机屏幕上读取）。像素单元的一个问题是它不能缩放。
4. 点 (pt)：点传统上用于印刷媒体（任何要打印在纸上的东西等）。一点等于 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 中的较大者

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

参见kyleschaeffer.com/....和css-tricks.com/....

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

但要实现响应式错字，请查看https://stackoverflow.com/a/21981859/406659

回答by ErichBSchulz

It seems to me the best will be the incoming remand vminunits as documented here.

在我看来，最好的将是这里记录的传入rem和vmin单位。

To cope with older browser you may want to have some CSS fall backs defined something like:

为了应对较旧的浏览器，您可能需要定义一些 CSS 回退，例如：

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

or

或者

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

(credit to Craig Butler)

（归功于克雷格巴特勒）

回答by Jim Clouse

Try using a mix of px, em, and rem.

尝试混合使用 px、em 和 rem。

Chris Coyier explains in this postthat using px for your document, rem for your modules (ie. sections of your page), and em for text elements within your modules, the page will scale cleanly.

Chris Coyier 在这篇文章中解释说，将 px 用于文档，rem 用于模块（即页面的部分），以及 em 用于模块内的文本元素，页面将可以清晰地缩放。