Question

我正在使用AngularJS 1.x和Angular Material开发一个Web应用程序。我尝试在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>

Answer 1

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

＆＃13;

mm.Body = string.Format("Hi {0},<br /><br />Click <a href='http://www.YourWebSite.com'> here</a> to change your password<br /><br />Thank You.<br/><br/>IslandGas Team", username);

＆＃13;

h1 {
    font-size: 10vw;
}

＆＃13;

Browser support reference

Answer 2

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

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

Answer 3

视口单元使浏览器的缩放处于非活动状态。但是如果你愿意给它一个镜头，你可以通过以下方式按比例调整字体大小：

使用 em 或 rem
然后使用javaScript调整根字体大小

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

x需要缩放到窗口宽度，这很容易使用

document.documentElement.clientWidth

使用窗口调整大小事件，但在区分调整宽度和缩放的时候变得有点棘手，特别是考虑跨浏览器支持，但如果你专注于为所有浏览器计算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。

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

4 个答案: