自适应应用程序:字体大小单位em与px对比pt与百分比

Question

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

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

我会感谢任何帮助!

Answer 1

您可能想看看这篇文章:小链接.

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

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

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

Answer 2

各种尺寸

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

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

但是要获得响应性错字，请查看/sf/answers/1538730161/