title: change fonts size when screen size changes using less
body: <p>Is there any way to change the font size when the browser is resized using less?
  Without having to create different classes for each screen size. </p>
  
  <p>Less style code</p>
  
  <pre><code>.banner-xlg-h1
  {
      .hidden-lg;
      .hidden-md;
      .hidden-sm;
      .hidden-xs;
      margin-right:auto;
      margin-left:auto;
      text-align:center;
      color:white;
      font-size:36pt;
  }
  .banner-lg-h1
  {
      .hidden-xlg;
      .hidden-md;
      .hidden-sm;
      .hidden-xs;
      margin-right:auto;
      margin-left:auto;
      text-align:center;
      color:white;
      font-size:30pt;
  }
  .banner-md-h1
  {
      .hidden-xlg;
      .hidden-lg;
      .hidden-sm;
      .hidden-xs;
      margin-right:auto;
      margin-left:auto;
      text-align:center;
      color:white;
      font-size:24pt;
  }
  .banner-sm-h1
  {
      .hidden-xlg;
      .hidden-lg;
      .hidden-md;
      .hidden-xs;
      margin-right:auto;
      margin-left:auto;
      text-align:center;
      color:white;
      font-size:18pt;
  }
  .banner-xs-h1
  {
      .hidden-xlg;
      .hidden-lg;
      .hidden-md;
      .hidden-sm;
      margin-right:auto;
      margin-left:auto;
      text-align:center;
      color:white;
      font-size:12pt;
  }
  </code></pre>
  
  <p>the above is what I have written so far. I have modified some of the bootstrap less code to have four screen sizes. Can I by using media queries combine the above to one class? if so how.</p>
  
  <p>thank you</p>