如何使字体大小与屏幕分辨率和显示器大小无关

How to make font size independent of screen resolution and monitor size?

本文关键字：显示器 分辨率 何使 字体 屏幕      更新时间：2023-09-26

我正在开发一个应用程序，我想在其中制作独立于屏幕分辨率和屏幕大小的字体大小。所有分辨率和所有屏幕大小的字体大小都应该相同。如何使用javascript和css？

我认为像素每点是硬件相关的东西，所以我不确定javascript和css是否可以访问它

我尝试了许多替代方案，但找不到确切的解决方案。

您可以使用基于1/72英寸的点(pt(。这是一个传统上来自印刷的单元。现在，这取决于设备是否正确配置，以及不同显示器的大小是否相同。通常情况并非如此，但有些设备知道它们的物理屏幕大小。您也可以使用英寸in、厘米cm和毫米mm。

将此大小与相对大小ems一起使用。这样，整个站点就可以根据需要进行放大和缩小。

body {
    font-size: 12pt;
}
h1 {
    font-size: 2em;
}
p {
    font-size: 1.1em;
}

没有好的通用解决方案。在我看来，你应该考虑到这是不可能的。这篇文章是最近发表的，并提出了解决这个问题的(长期(方案。它是长期的，因为它依赖于多个参与者(硬件和软件制造商(来解决。

引用作者的话：

荒谬的是，我们可以把机器人送到火星，但实际上仍然不可能在网页上呈现一个字形，并满怀信心地说："如果你用尺子在屏幕上测量这个字形，它将正好有10毫米宽。">

老式的点应该有效。

示例：

<style>
p
{
    font:15pt;
}
</style>

您无法做到这一点，因为您无法确定用户监视器的真实大小，除非您能够控制正在使用的计算机。

用户可以同时连接两个显示器，并对其进行设置，使屏幕上相同的元素以不同的尺寸显示在每个显示器上。

您可以使用厘米和毫米：

<span style="font-size: 2cm;">i am big</span>
<span style="font-size: 2mm;">i am tiny</span>

html {font-size: 14px /* in example */}

这使得html的每个同级元素都给出了一个相对大小，这意味着

body { font-size: 100% } /* is 14px now */

以及

div { font-size: 1em } /* should be 14px also */

还可以使用javscript更改html字体大小，并且所有相对大小都应按预期工作。使用jQuery，您可以访问主体的字体大小，并将其设置为根据屏幕大小计算的某个大小。对于不同设备中的任何类型的应用程序，即使工作也是CCD_ 6规则。

var fontsize=14+'px';
jQuery('body').css('font-size',fontsize);

正如其他人所说，字体大小不能完全独立于屏幕分辨率。您可以使用媒体查询来针对不同的屏幕大小，并相应地调整字体大小。

body { font-size: 16px; }
@media screen and (min-width: 600px) {
    body { font-size: 112.5%; }
}
@media screen and (min-width: 800px) {
    body { font-size: 125%; }
}
@media screen and (min-width: 1000px) {
    body { font-size: 137.5%; }
}
@media screen and (min-width: 1200px) {
    body { font-size: 150%; }
}

这些只是示例值——你必须尝试各种尺寸的应用程序，看看什么看起来最好。Trent Walton的网站就是一个很好的例子——调整浏览器窗口的大小，看看文本大小会发生什么。

如果使用em或rem单位调整所有字体的大小，则只需调整正文字体大小，其余值将按比例缩放。

相关文章：