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>

Answer 1

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">