Question

我正在使用HTML和CSS构建一个针对桌面，平板电脑和手机的响应式应用，但我不确定我应该使用哪种单位字体大小适合任何大小的屏幕。 em，px，pt和百分比有什么区别？什么是最适合我的选择？

我希望在桌面设备，平板电脑和手机的响应式应用中听到有关它的真实体验

我会感谢任何帮助！

Answer 1

您可能需要查看一下这篇文章：little link。

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

px ：像素是设备显示屏中的一个小方块（通常），一次只能显示一种颜色。您的screen resolution指定了您的屏幕/显示器的像素数。因此，当您指定：font-size: 12px;时，您基本上告诉浏览器每个字母应该是12像素高（大约 - 不同字母的高度稍有不同，但保留相对差异）。
百分比：font-size: 50%;将元素的字体大小设置为其父元素字体大小的50％。
pt ：1pt（点）是1/72英寸。设置font-size: 12pt;会将字符的高度设置为12/72英寸（同样，不同的字符会有所不同）。
em ：em是所选字体中字母“m”的宽度，与百分比基本相同，只是1em为100%和{{1是} 1.5em。

所以你的选择可能是150%，因为它会保留文本大小与其他大小元素的逻辑比例。

Answer 2

各种尺寸

“Ems”（em）：“em”是一个可扩展的单元。 em等于当前的字体大小，例如，如果文档的字体大小为12pt，则1em等于12pt。 Ems本质上是可扩展的，所以2em等于24pt，.5em等于6pt等等。
百分比（％）：百分比单位与“em”单位非常相似，只是存在一些基本差异。首先，当前的字体大小等于100％（即12pt = 100％）。使用百分比单位时，您的文本仍然可以完全扩展到移动设备和可访问性。
像素（px）：像素是固定大小的单位，用于屏幕媒体（即在计算机屏幕上阅读）。像素单元的一个问题是它不能缩放。
点数（点数）点传统上用于打印介质（任何要打印在纸上的东西等）。一点等于1/72英寸。点与像素非常相似，因为它们是固定大小的单位，不能缩放。
视口单元： - 这些是相对于视口的。它们是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

Answer 3

在我看来，最新的rem和vmin单位为documented here。

要应对旧浏览器，您可能希望将某些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;
}

（归功于Craig Butler）

Answer 4

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

Chris Coyier explains in this post使用px作为您的文档，rem用于您的模块（即页面的各个部分），以及em用于模块中的文本元素，页面将完全缩放。