Question

我正在开发一个应用程序，我想在其中制作与屏幕分辨率和屏幕大小无关的字体大小。所有分辨率和所有屏幕尺寸的字体大小应相同。如何使用javascript和css进行操作？

我认为Pixel每点与硬件有关，所以我不确定javascript和css是否可以访问它。

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

Answer 1

您可以使用基于1/72英寸的点（pt）。这是一个传统上来自印刷的单位。现在，这取决于设备是否配置正确，从监视器到监视器的大小是否相同。它通常不是，但有些设备知道它们的物理屏幕尺寸。您还可以使用英寸in，厘米cm和毫米mm。

将此尺寸与ems结合使用，它们是相对尺寸。这样，整个网站可以根据需要进行扩展和缩小。

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

Answer 2

没有好的，通用的解决方案。在我看来，你应该考虑到这是不可能的。 This article最近发布，并建议（长期）解决该问题。这是长期的，因为它依赖于多个参与者（硬件和软件制造商）来解决问题。

引用作者：

我们可以将机器人发送到火星但是几乎不可能在网页上渲染一个字形并且充满自信地说：“如果你用尺子在屏幕上测量这个字形，它将正好是10毫米宽，这是荒谬的。。“

Answer 3

老式的points应该有用。

示例：

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

Answer 4

您无法执行此操作，因为您无法确定用户监视器的真实大小，除非您可以控制所使用的计算机。

用户可以同时连接2个显示器并进行设置，以便屏幕上相同的元素在每个显示屏上显示不同的大小。

Answer 5

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，您可以访问正文的字体大小并将其设置为从屏幕大小计算的某个大小。对于不同设备中的任何类型的应用程序，即使工作也是@media () { your css here }规则。

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

Answer 6

您可以使用cm和mm：

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

Answer 7

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

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's网站就是一个很好的例子 - 调整浏览器窗口大小，看看文本大小会发生什么变化。

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

如何使字体大小独立于屏幕分辨率和显示器大小？

7 个答案: