Angular Material Design text size change
<p>I'm using <a href="https://material.angularjs.org/latest/" rel="nofollow">https://material.angularjs.org/latest/</a> to make my site responsive. For different screen sizes, I want my font size to change for example,</p>

<p>for small screen, I want font size to be 5px and for greater than medium, 14px. </p>

<p>I have done this so far but font size does not change:</p>

<pre><code>&lt;h3 class=".md-display-1"&gt;John&lt;/h3&gt;
</code></pre>

<p>its css:</p>

<pre><code>@media (max-width: @flex-sm) {
  body{font-size: 2px;}
}

@media (max-width: @flex-gt-md) {
  body{font-size: 30px;}
}
</code></pre>