Question

我正在尝试为移动设备优化我的Angular Material目标。

根据屏幕大小，有没有办法为标题设置不同的字体大小而无需编写自定义CSS？

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

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

Answer 1

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

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

Answer 2

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

Answer 3

您可以根据要显示的弹性大小更改类，这会确定列数等...当您使用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 4

我们可以使用纯CSS实现这一目标。你可以使用vh（视口高度）＆amp; vw（视口宽度）作为字体大小属性。它将完全响应所有屏幕尺寸。
10vh：视口高度的10％（即，对于移动设备，它将渲染较小，对于桌面它将渲染得更大）

如何根据Angular材质中的屏幕尺寸设置不同的字体大小？

4 个答案: