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

Posted 2023-03-06

【中文标题】响应式应用程序：字体大小单位 em vs. px vs. pt vs. percent

【英文标题】：Responsive App: which font-size units em vs. px vs. pt vs. percent

【发布时间】：2012-08-29 13:38:27

【问题描述】：

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

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

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

【参考方案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”的宽度，与百分比基本相同，只不过@9​​87654327@为100%，1.5em为150%。李>

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

【讨论】：

它还没有回答我的问题。并没有说单位在不同的屏幕和设备上是如何工作的，可能在真实场景中会有所不同。

几处澄清：1 em = '所选字体的“m”字母的宽度，在定义的字体大小下'。 “pt”指的是“真实”尺寸，因为它是基于真实长度测量定义的（无论屏幕尺寸如何，一英寸都是一英寸）​​“px”与屏幕分辨率相关。不同分辨率的相同屏幕将显示不同的尺寸。 iPhone 中的像素与笔记本电脑屏幕中的像素大小不同。此外，设备之间的界面也不相同，因此我认为最好的选择是根据每种设备类型定义不同的屏幕尺寸。

这实际上是一个误导性的答案。 “px”值表示相对像素（或与设备无关的像素），而不是显示器上的实际物理像素。例如，高 DPI 显示器的缩放将乘以您提供的“px”值，以得出实际使用的物理像素数。这是我推荐用于现代网络应用程序/网站的单元，你会看到很多框架都在使用它。 “pt”在不同平台上的定义不同，最好避免这种情况。

【参考方案2】：

各种尺寸

“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 中的新功能
3.2vw = 视口宽度的 3.2% 3.2vh = 视口高度的 3.2% 3.2vmin = 3.2vw 或 3.2vh 中的较小值 3.2vmax = 3.2vw 或 3.2vh 中的较大者

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

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

【讨论】：

这是一个非常具有误导性的答案。 “px”值是 NOT 屏幕像素。它们具有相对或与设备无关的像素，并且它们根据显示器的 DPI 进行缩放。

每英寸有 96 个 css 像素——它们可以缩放——参见window.devicePixelRatio。

【参考方案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）

【参考方案4】：

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

Chris Coyier explains in this post 将 px 用于文档，rem 用于模块（即页面的部分），em 用于模块中的文本元素，页面将干净地缩放。