用屏幕大小缩放字体大小？答案

【问题标题】：Scaling font size with screen size?用屏幕大小缩放字体大小？
【发布时间】：2023-03-22 22:08:01
【问题描述】：

我正在使用 AngularJS 1.x 和 Angular Material 开发一个网络应用程序。我正在尝试在md-display-4 创建一个带有大标题的登录页面。

它是这样的：

如您所见，标题很好地填满了页面并且适合一行。

但是，这是在 1680x1050 显示器上进行的。如果我将浏览器窗口移动到较小的 1366x768 显示器，我会得到这个：

如您所见，字体保持相同的物理大小并溢出到下一行，并且不再居中。

如何确保字体根据屏幕大小缩放时的外观一致？

这是我的代码：

<html>
    <head>
        <title>FOOBY DOOBY</title>

        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

        <link rel="stylesheet" href="styles.css" />

        <!-- Angular Material requires Angular.js Libraries -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

        <!-- Angular Material Library -->
        <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

        <script src="app.js"></script>
    </head>
    <body ng-app="homePage">
        <div layout="column">
            <div layout layout-align="center">
                <h1 class="md-display-4">FOOBAR IS THE TITLE HERE</h1>
            </div>
            <div>
                <!-- Description here -->
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： html css angularjs responsive-design angular-material

【解决方案1】：

您可以使用视口单位，例如：

h1 {
    font-size: 10vw;
}

&lt;h1&gt;Foobar is the title here&lt;/h1&gt;

Browser support reference

【讨论】：

是的，成功了！以前读过它，无法让它工作。原来我需要在我的 CSS 中选择 md-display-4 而不是 h1

【解决方案2】：

了解 CSS 媒体查询。它将为您提供与屏幕大小相关的字体控制。

您可以添加到引导程序的现有类以根据屏幕宽度修改字体大小。

【讨论】：

【解决方案3】：

视口单位使浏览器的缩放无效。但如果你愿意试一试，你可以通过以下方式调整字体大小与屏幕大小成比例：

使用 em 或 rem 等相对字体单位
然后使用 javaScript 调整根字体大小

document.documentElement.style.fontSize = x + 'rem';

x 需要缩放到窗口宽度，使用

document.documentElement.clientWidth

使用窗口调整大小事件，但在区分调整宽度和缩放时变得有点棘手，特别是考虑到跨浏览器支持，但如果您专注于计算所有浏览器的 devicePixelRatio，这是可行的。

如果你不想与之抗争，我已经建立了一个小型库，properly handles font-scalling for all relative browsers IE9+。

【讨论】：

【解决方案4】：

我认为这种动态字体大小最好在 css 中定义。 Mike Riethmuller 从 youtube 上找到了这个很好的例子。 https://www.youtube.com/watch?v=S8xSbtDySHE

14:20解释了怎么做。

结果显示在 18:00。

他主要做的是使用 calc 和 vw 定义字体大小：

font-size: calc($min-font-px + ($max-font - $min-font) * (100vw - $min-screen-px) / ($max-screen / $min-screen));
// example dimension from video -->
font-size: calc(16px + (24 -16) * (100vw - 400px) / (800 - 400));

当屏幕宽度 >=800px 时，使用最大字体大小。当屏幕大小小于 800px 时，字体大小逐渐接近最小字体大小，直到屏幕宽度为 400px。

【讨论】：