Question

有没有办法在不使用JavaScript的情况下缩放font-size？例如，如果您在15英寸笔记本电脑上打开网页，并且容器div宽度为400像素，并且字体被定义为填充整个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。这不是我想要的，但它是一个拉伸文本的解决方案。我感谢你的帮助。

在没有JavaScript的情况下缩放字体大小

3 个答案: