title: Angular Material Design text size change
body: <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>