Minimizing CSS media queries for the page title? I am working on page titles to be responsive. The code I have works and gets the job done, but I know that this is verbose. I decided upon the widths by trial and error based on how the words were stacking on each other 


Desktop

Tablet

Mobile


This is the what I currently have as code

HTML

  &lt;div class="row"&gt;
    &lt;div id="page-title"&gt;
      &lt;h1&gt;BruxZir&lt;sup&gt;&amp;reg;&lt;/sup&gt; Solid Zirconia Crowns &amp;amp; Bridges&lt;/h1&gt;
    &lt;/div&gt;


CSS

#page-title, #page-title-video { 
  background: url(../img/top-banner.jpg) #273344 no-repeat right top;
  padding: 0.2em 0 0.2em 1em; 
}

#page-title { margin: 12px 15px 24px 15px; }
#page-title-video { margin: 12px 0 24px 0; }

#page-title h1, #page-title-video h1 { 
  color: #FFFFFF;
  letter-spacing: 0.08em;
}

@media screen and (min-width: 1px) and (max-width: 321px) {
  #page-title h1, #page-title-video h1 {
    font-size: 18px;
  }
}

@media screen and (min-width: 322px) and (max-width: 569px) {
  #page-title h1, #page-title-video h1 {
    font-size: 20px;
  }
}

@media screen and (min-width: 570px) and (max-width: 749px) {
  #page-title h1, #page-title-video h1 {
    font-size: 22px;
  }
}

@media screen and (min-width: 750px) and (max-width: 950px) {
  #page-title h1, #page-title-video h1 {
    font-size: 24px;
  }
}

@media screen and (min-width: 951px) {
  #page-title h1, #page-title-video h1 {
    font-size: 36px;
  } 
}
If you have control over your html, give both headers the same class, for example .header-stretch.
For media queries - you actually can get rid of min-width. Yep, your code will be overriden for several times. But browser won't care rewriting the same parameter(font-size in this case - in any other you can do so) so it should be like this: 

@media screen and (min-width: 951px) {
  .header-stretch {
    font-size: 36px;
  } 
}
@media screen and (max-width: 950px) {
  .header-stretch {
    font-size: 24px;
  }
}
@media screen and (max-width: 749px) {
  .header-stretch {
    font-size: 22px;
  }
}
@media screen and (max-width: 569px) {
  .header-stretch {
    font-size: 20px;
  }
}
    @media screen and  (max-width: 321px) {
  .header-stretch {
    font-size: 18px;
  }
}