title: how to optimize the media-query styles
body: <p>I am repearting the styles in my media-query test but don't know how to optimize the sytles without repeating the same styles.</p>
  
  <p>here is my sample styles</p>
  
  <pre><code>@media screen and  (min-width: 1261px) and  (max-width: 1340px)  { 
      .wishlist-wrap {width:24.5245901639%}
      .info-wrap {width:24.262295081%}
      .meta-menu-wrap {width:28.86885245%}
      .nav-head &gt; ul &gt; li {padding-right:1.8823529411%;}
  }
  
  @media screen and  (min-width: 1211px) and  (max-width: 1260px)  { 
      .wishlist-wrap {width:20.5245901639%}
      .info-wrap {width:25.262295081%}
      .nav-head &gt; ul &gt; li {padding-right:2.8823529411%;}
      .meta-menu-wrap {width:30.86885245%}
  }
  
  @media screen and  (min-width: 1181px) and  (max-width: 1210px)  { 
      .wishlist-wrap {width:20.5245901639%}
      .info-wrap {width:26.262295081%}
      .nav-head &gt; ul &gt; li {padding-right:2.8823529411%;}
      .meta-menu-wrap {width:30.86885245%}
  }
  
  @media screen and  (min-width: 1080px) and  (max-width: 1180px)  { 
      .wishlist-wrap {width:20.5245901639%}
      .info-wrap {width:28.262295081%}
      .logo-wrap {width:14.68852459%;}
      .meta-menu-wrap {width:30.86885245%}
      .nav-head &gt; ul &gt; li {padding-right:2.0823529411%;font-size:13px}
      .panel-primary { padding: 6px 36px 10px 20px;}
  }
  </code></pre>