html - 响应式应用程序：字体大小单位 em vs. px vs. pt vs. percent

Question

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

我想在台式机、平板电脑和手机的响应式应用程序中听到关于它的真实体验

如果有任何帮助，我将不胜感激！

score 23 · Accepted Answer

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

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

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

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

score 5 · Accepted Answer

各种尺寸是

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

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

score 3 · Accepted Answer

在我看来，最好的将是这里记录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;
}

score 2 · Accepted Answer

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

Chris Coyier 在这篇文章中解释说，将 px 用于您的文档，将 rem 用于您的模块（即页面的部分），并将 em 用于模块中的文本元素，页面将干净地缩放。

4 回答 4