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

Question

Im trying to optimize my Angular Material landingpage for mobile devices.

Is there a way to have different font sizes for the headline depending on the screen size without writing custom css?

In this example h1 with md-display-3 would be too large on mobile devices:

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

Solution 1

After a quick lookup I saw that it is indeed possible. Angular Material documentation : Typography Simply replace .md-display-3 to md-display-2.

Solution 2

To adjust your font size according to your browser, add this meta tag to your document.

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

Comments

[Rene Füchtenkordt]

Ok, so how would you change the class depending on the screen size?

[Théo Naciri]

Maybe try to use these directives on the Material Documentation on layout options Make two lines, only one would display : <h1 show-gt-sm class="center white md-display-3">This is a headline on greater than small screens (gt 960px)</h1> <h2 hide show-gt-sm class="center white md-display-2">This is a headline on smaller screens (lt 960px)</h2> Couldn't test it though.

[Rene Füchtenkordt]

This is a pretty clever approach if you combine it with media queries, so that you don't end up with gigantic fonts on larger screens :-)

[Rene Füchtenkordt]

Thank you, that did the trick for me: <h1 class="center white md-display-4" hide show-gt-sm>This is a headline on greater than small screens (gt 960px)</h1> <h2 class="center white md-display-2" hide-gt-sm>This is a headline on smaller screens (lt 960px)</h2>