如何更改 HTML 中与 window 相关的文本大小？

Question

我正在 Google 站点中制作网页，运行遇到了一个看似常见的问题。当 window 变小时，如何使文本大小变小？我是 HTML 的新手，所以我需要一个带有示例代码的简单答案。我不确定，但我认为 Google 站点只允许 HTML。不幸的是，我无法附加以下代码，但愿这些代码足够了：

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

Answer 1

使用大众 CSS 属性.

示例：

p {font-size: 4vw;}

只能在 HTML5 兼容的浏览器上可靠地工作。

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

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

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

Answer 2

您应该使用 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 文件，您可以阅读此 link:

Adding Css file

Answer 3

两个提示：

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

 `font-size: 2em;`

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

希望对您有所帮助

如何更改 HTML 中与 window 相关的文本大小？

How do I change the text size in relation to the window in HTML?

html

google-sites

text-size