Angular Material如何根据屏幕大小设置不同的字体大小？

Question

我正在尝试优化我的 Angular Material 移动设备着陆页。

有没有一种方法可以根据屏幕大小为标题设置不同的字体大小，而无需编写自定义 css？

在此示例中，md-display-3 的 h1 在移动设备上太大：

<h1 class="center white md-display-3">This is a headline</h1>

Answer 1

快速查找后，我发现确实可以。 Angular Material documentation : Typography 只需将 .md-display-3 替换为 md-display-2.

Answer 2

您可以根据显示的弹性尺寸更改 class，这决定了列数等...当您使用 Angular Material Containers 尺寸时，不同的部分可以各自有不同的字体。

但是，您最好不要更改字体大小，而是使用 flexbox 布局，并以一致的大小显示您的文本，但让您的布局流更好地适应不同的设备。

<div layout="column" class="zero">
  <div flex="33" flex-md="{{ vm.box1Width }}" class="one"></div>
  <div flex="33" layout="{{ vm.direction }}" layout-md="row" class="two">
    <div flex="22" flex-md="10" hide-lg class="two_one"></div>
    <div flex="30px" show hide-md="{{ vm.hideBox }}" flex-md="25" class="two_two"></div>
    <div flex="20" flex-md="65" class="two_three"></div>
  </div>
  <div flex class="three"></div>
</div>

或者，您可以更改显示并使用 Angular 根据屏幕大小显示或隐藏部分。参见 Show and Hide。

Answer 3

我们可以使用纯 CSS 来实现这一点。您可以使用 vh（视口高度）和 vw（视口宽度）作为字体大小属性。它将完全响应所有屏幕尺寸。
10vh ：视口高度的 10%（即，对于移动设备，它将呈现较小，对于桌面，它将呈现更大）

Answer 4

要根据您的浏览器调整字体大小，请将此元标记添加到您的文档中。

<meta name="viewport" content="width=device-width, initial-scale=1">

Angular Material如何根据屏幕大小设置不同的字体大小？

How to set different font sizes depending on the screen size in Angular Material?

css

angularjs

angular-material