title: How to fix css errors for min-device-width and max-device-width
body: <p>using the online CSS validator I am trying to validate the CSS of my page but I received the following 2 error messages:</p>
  <blockquote>
  <p><em>Unknown error org.w3c.css.parser.analyzer.ParseException: Deprecated media feature “min-device-width”. For guidance, see the Deprecated
  Media Features section in the current Media Queries specification.</em></p>
  <p><em>Unknown error org.w3c.css.parser.analyzer.ParseException: Deprecated media feature “max-device-width”. For guidance, see the Deprecated
  Media Features section in the current Media Queries specification.</em></p>
  </blockquote>
  <pre><code>    @media only screen
    and (min-device-width : 375px)
    and (max-device-width : 667px) {
          body { font-size: 9.5pt; }
          div.content { width: 96ex; margin: 0; }
      }
  @media only screen
    and (min-device-width: 1200px) {
          body { font-size: 10pt; margin: 0 4em; }
          div.content { width: 96ex; margin: 0; }
      }
  </code></pre>
  <p>How can I recode the above css to make it pass the validation?</p>
  <p>Thank you so much.</p>