如何更改与 HTML 中的窗口相关的文本大小？答案

【问题标题】：How do I change the text size in relation to the window in HTML?如何更改与 HTML 中的窗口相关的文本大小？
【发布时间】：2016-08-01 22:13:09
【问题描述】：

我正在 Google 协作平台中制作网页，但遇到了一个看似常见的问题。当窗口变小时，如何使文本变小？我是 HTML 非常新手，所以我需要一个简单的答案和一些示例代码。我不确定，但我认为 Google 协作平台只允许 HTML。不幸的是，我无法附加以下代码，我希望这已经足够了：

<font color="#000000" face="georgia, serif" size="4"><span style="line-height:40px">This is code</span></font>

【问题讨论】：

你不会单独使用 HTML 来实现你想要的。我想说你要么需要使用 JavaScript 或 CSS 媒体查询，但在我看来，Korgrue 的答案是正确的选择。

标签： html google-sites text-size

【解决方案1】：

两个提示：

1) 使用相对字体大小使用em。 em 根据父元素字体大小的计算值设置相对单位。例如

 `font-size: 2em;`

2) 对于更具体的字体，添加基于屏幕大小的附加媒体查询。

希望对你有帮助

【讨论】：

【解决方案2】：

使用大众 CSS 属性。

示例：

p {font-size: 4vw;}

仅在兼容 HTML5 的浏览器上可靠运行。

规格： https://developer.mozilla.org/en-US/docs/Web/CSS/length

1VW = 视口宽度的 1/100。调整 vw 之前的值以调整您想要的类型的自动缩放量。

编辑：正如其他人所指出的 - 您也可以使用媒体查询，但缩放并不平滑，并且会在每个断点处跳转到每个新的字体大小。这对于您想要精确控制字体大小的正文副本来说很好 - 但是，如果您想要在所有视口大小上按比例缩放，而不仅仅是在预定义的断点处，请使用 VW。

【讨论】：

不错。我主要是服务器端开发人员，对 VST 不熟悉。学习新东西总是好的。

【解决方案3】：

您应该使用 css 媒体查询：

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
    font-size: 16pt;
}

@media only screen and (max-width: 767px) {
    /* phones */
    font-size: 12pt;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
    font-size: 18pt;

}

如果您不知道如何添加 css 文件，您可以在此链接中阅读：

Adding Css file

【讨论】：