根据分辨率改变字体大小

Question

我正在开发一个网页，其中各段落使用不同的字体大小，例如使用 em 大小：font-size: 2em;。但是当我将屏幕分辨率降低时，我希望文字大小也会跟着变小。

为此，我尝试了以下代码：

<script>
        if ( screen.width > 1600)
        {
            document.write('<style>#centered h1 { font-size: 2em; } </style>');
        }
        else if (screen.width <= 1600 && screen.width >= 1360)
        {
            document.write('<style>#centered h1 { font-size: 1.7em; } </style>');
        }
        else if (screen.width < 1360 && >= 1024)
        {
            document.write('<style>#centered h1 { font-size: 1.4em; } </style>');
        }
        else
        {
            document.write('<style>#centered h1 { font-size: 0.8em; } </style>');
        }
    </script>

首先: 它不能工作...
其次: 我认为应该有一种更简洁的方法来实现...

所以问题是: 如何在我的字体中使用不同大小或如何使它们适应不同的分辨率?

有人可以帮忙吗? 谢谢!

- Sonhja

---

我建议使用不同的样式表...这样会更清晰。 - slash197

我建议使用CSS媒体查询。 - SVS

屏幕分辨率通常随着屏幕尺寸变小而降低。缩小字体大小只会使内容越来越难以阅读。在正文中使用1em 的字体大小。 - Quentin

通常，当使用 px 来测量大小时，会出现这个问题，而不是使用 em 或 %。你尝试过百分比了吗（对于正确的 CSS 文件，不区分屏幕大小）？ - AleksanderKseniya

Answer 1

尝试使用这个概念证明CSS：

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

在 jsFiddle 上的工作演示

- Vladimir Starkov

---

我只是想了解一下。使用vw有什么问题吗？如果我们使用vw，甚至不需要考虑媒体查询，对吧？ - Mr_Green

vw 没有任何问题。只是在提问和回答时，浏览器的支持存在一些问题。 - Vladimir Starkov

Answer 2

您应该使用媒体查询而非JS。或者，您可以使用JS向body添加类，然后使用该类来定位您想要的内容。

- Rich Bradshaw

Answer 3

最佳解决方案是视口大小的字体

有很多原因。以下是其中两个:

1. 对于在屏幕上阅读文本而言，存在一个舒适的行长。我不想激起争议，但让我们说它约为80个字符。这些单位允许您获得完美的体验，并使该体验缩放到任何尺寸的屏幕。
2. 它们允许你紧密地耦合排版标题和相关内容的大小关系。

它们是如何工作的

三个值中的任意一个单元是视口轴的1％。“Viewport” ==浏览器窗口大小==窗口对象。如果视口宽度为40厘米，则1vw == 0.4厘米。

用于字体大小时，我猜它是一个“字母”，其大小为该大小，但如我们所知，在非等宽字体中，字母的宽度相当随意。我发现你只需要调整值以使其符合您的要求。这基本上就是我们所做的，对吧？

• 1vw = 视口宽度的1％
• 1vh = 视口高度的1％
• 1vmin = 1vw或1vh中较小的一个
• 1vmax = 1vw或1vh中较大的一个

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

- christian vazquez

---

这会使得在小屏幕上的文本过于小，而在大屏幕上过于大。我认为更好的方法可能是使用比1更小的线性因子进行缩放。 - Dmitri Zaitsev

Answer 4

你可以像lanzz指出的那样，使用相对于屏幕分辨率的字体大小（em或pt）。或者，你也可以在CSS文件中使用媒体查询，如“http://www.w3.org/TR/css3-mediaqueries/#width”。

@media screen and (min-width: 400px) and (max-width: 700px) { … }

您可以设置任何最小和最大宽度。

- FatalError

---

如果我想修改一个已经存在的CSS属性怎么办？我的意思是：我有一个带有其属性的ID，但是使用您所说的这种方法，我想添加字体大小。这可能吗？ - Sonhja

我不确定我是否正确理解了您的意思，但是，如果您想要针对特定分辨率更改字体大小，可以通过@media screen and (min-width: 400px) and (max-width: 700px) { font-size:15pt; }来实现。 如果您想要将“min-width”更改为“font-size”，这是不可能的。您只能指定“宽度、高度、设备宽度、设备高度、方向、纵横比、设备纵横比、颜色、分辨率”（还有几个）。 - FatalError

Answer 5

em 大小是相对于父元素的大小而言的。你可能想要使用 pt 单位（1pt = 1/72 英寸）来设置字体大小，这种单位不受分辨率影响，可以在任何分辨率下呈现相同的视觉大小。

- lanzz