使用屏幕大小缩放字体大小？

Question

我正在使用 AngularJS 1.x 和 Angular Material 开发网络应用程序。我正在尝试在 md-display-4.

创建一个带有大标题的着陆页

这是它的样子：

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

但是，这是在 1680x1050 显示器上显示的。如果我将浏览器 window 移动到我较小的 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>

Answer 1

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

h1 {
    font-size: 10vw;
}

<h1>Foobar is the title here</h1>

Browser support reference

Answer 2

查看 CSS 媒体查询。它将使您能够控制与屏幕尺寸相关的字体。

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

Answer 3

视口单位使浏览器的缩放功能处于非活动状态。但是如果你愿意试一试，你可以根据屏幕大小按比例调整字体大小：

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

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

x 需要缩放到 window 宽度，使用

document.documentElement.clientWidth

有了 window resize 事件，但在区分调整宽度和缩放时变得有点棘手，特别是考虑到跨浏览器支持，但如果你专注于计算所有浏览器的 devicePixelRatio 是可行的。

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

Answer 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。

使用屏幕大小缩放字体大小？

Scaling font size with screen size?

html

css

responsive-design

angularjs

angular-material