如何修复 min-device-width 和 max-device-width 的 css 错误

Question

使用在线 CSS 验证器我正在尝试验证页面的 CSS，但收到以下 2 条错误消息：

未知错误 org.w3c.css.parser.analyzer.ParseException：不推荐使用的媒体功能“min-device-width”。有关指导，请参阅已弃用 当前媒体查询规范中的媒体功能部分。

未知错误 org.w3c.css.parser.analyzer.ParseException：不推荐使用的媒体功能“max-device-width”。有关指导，请参阅已弃用 当前媒体查询规范中的媒体功能部分。

    @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; }
    }

如何重新编码上述 css 以使其通过验证？

非常感谢。

Answer 1

无需使用“min-device-width”

@media only screen and (min-width: 375px) and (max-width: 667px) {
  body {
    font-size: 9.5pt;
  }
  div.content {
    width: 96ex;
    margin: 0;
  }
}
@media only screen and (min-width: 1200px) {
  body {
    font-size: 10pt;
    margin: 0 4em;
  }
  div.content {
    width: 96ex;
    margin: 0;
  }
}