html - 不使用 JavaScript 缩放字体大小

Question

有没有办法在不使用 JavaScript 的情况下缩放字体大小？例如，如果您在 15" 笔记本电脑上打开网页，并且容器 div 的宽度为 400px，并且字体被定义为填充整个 div。然后您在 17" 屏幕上打开网站，并且 div 为 600px。有没有办法让字体自动缩放？

本质上，它在文本中添加了“宽度：100%”，这是您无法做到的。我宁愿在没有 JavaScript 的情况下这样做，因为我已经在网页中使用了很多，而且一段时间后它变得混乱。

任何帮助，将不胜感激。提前致谢。

Answer 1

您可以为此使用媒体查询。根据页面/容器的宽度，您可以相应地设置字体大小。

例如：

@media only screen and (max-device-width: 480px) {
    #container { font-size: 90%; }
}

@media only screen and (max-device-width: 600px) {
    #container { font-size: 100%; }
}

Answer 2

添加媒体查询您的 css 文件。

@media only screen and (max-width: 800px)
{
    body
    {
        //font-size or what you want to change 
    }
}

或者编写外部文件并导入它：

<link rel="stylesheet" href="http://domain.tld/screen.css" type="text/css" media="MediaCssId" />

Answer 3

感谢大家的帮助，但我最终做的只是使用 text-align: justify。这不完全是我想要的，但它是一种拉伸文本的解决方案。我感谢您的所有帮助。