title: IE11 @media with width
body: <p>For IE11 I'm using the following @media query:</p>
  
  <pre><code>@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){}
  </code></pre>
  
  <p>Which works fine.  </p>
  
  <p>But now I want to also have 3 different ones for mobile, tablet and desktop.  I've tried the following:</p>
  
  <pre><code>@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (min-width : 1200px) {
      max-width: 83%;
  }
  
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (min-width : 768px) and (max-width: 1199px) {
      max-width: 90%;
  }
  
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (max-width : 767px) {
      max-width: 100%;
  }
  </code></pre>
  
  <p>But its always landing on the last one with a max-width of 100%.  I've tried putting the width before the -ms-high-contrast but it seems to have the same effect.  Any tips on fixing this?</p>