根据分辨率更改字体大小答案

【问题标题】：Change font size depending on resolution根据分辨率更改字体大小
【发布时间】：2023-04-02 10:34:01
【问题描述】：

我正在开发一个网页，它对不同的段落使用不同的大小，h...等等。我以 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>

首先：它不起作用...
第二：我认为应该有更清洁的方式来做到这一点......

所以，问题是：如何为我的字体使用不同的大小，或者如何让它们适应不同的分辨率？

有人可以帮忙吗？谢谢！

【问题讨论】：

我建议使用不同的样式表..这样会更干净
我建议使用 CSS 媒体查询。
屏幕分辨率通常会随着屏幕大小而下降。减小字体大小只会使内容越来越不可读。坚持1em 获取正文。
通常，在测量尺寸时使用px 而不是em 或% 时会出现该问题。您是否尝试过百分比（对于正确的 css 文件，不影响屏幕大小）？

标签： jquery html css screen-resolution

【解决方案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%; }
}

工作demo on jsFiddle

【讨论】：

这对我来说真的很有用。谢谢！
我只是想理解。使用vw 有什么问题？如果我们使用vw，我们甚至不需要考虑媒体查询，对吧？
大众没有问题。问答时浏览器的支持除外

【解决方案2】：

您想使用媒体查询而不是 JS。或者，使用 JS 向 body 添加一个类，然后使用它来定位你想要的。

【讨论】：

【解决方案3】：

最好的解决方案是 Viewport Sized Typography

有很多原因。这里有两个：

有一种适合阅读文本的行长在屏幕上。我不想踢马蜂窝，但让我们说它大约 80 个字符。这些单位让你感受完美，然后将体验扩展到任何尺寸的屏幕。
它们允许您将大小关系紧密耦合，例如，排版标题及其附带的内容。

它们的工作原理

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

对于 font-size 的使用，我猜它是一个具有该大小的“字母”，但正如我们所知，在非等间距字体中，字母的宽度是相当随意的。我发现你只需要调整这些值就可以得到你想要的。这基本上就是我们所做的，对吧？

1vw = 视口宽度的 1%
1vh = 视口高度的 1%
1vmin = 1vw 或 1vh，取较小者
1vmax = 1vw 或 1vh，取较大者

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

【讨论】：

这会使文本在小屏幕上变得不舒服，而在大屏幕上太大。我认为更好的方法可能是使用小于 1 的线性因子进行扩展。

【解决方案4】：

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

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

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

【讨论】：

如果我想修改一个存在的css属性怎么办？我的意思是：我有一个具有其属性的 id，但是使用您说的这种方法，我想添加字体大小。有可能吗？
我不确定我是否理解正确，但是，如果您正在谈论更改特定分辨率的字体大小，您可以通过 @media screen 和 (min-width: 400px) 和（最大宽度：700 像素）{ 字体大小：15pt；如果您正在谈论将“最小宽度”更改为“字体大小”，这是不可能的。您只能指定“宽度、高度、设备宽度、设备高度、方向、纵横比、设备纵横比、颜色、分辨率”（多个）。

【解决方案5】：

em 大小与父元素的大小有关。您可能希望以pt 单位（1pt = 1/72 英寸）设置字体大小，它们与分辨率无关，旨在在任何分辨率下看起来都具有相同的外观尺寸。

【讨论】：