html - 媒体查询不起作用

Question

我有这个简单的媒体查询:

@media screen and (min-width: 1440px) and (max-width: 1600px) {

   body {
      font-size: 14px;
   }

}

但这根本行不通。我的屏幕分辨率是 1600x900，所以我认为应该可以。这里到底出了什么问题？我把它放在 .css 文件的末尾，我添加了

<meta name="viewport" content="width=device-width,initial-scale=1.0">

到 HTML 文件...我不知道我还应该做些什么才能让它工作。

Answer 1

min-width and max-width请引用窗口的宽度，而不是屏幕的宽度。 @media screen表示样式适用于“屏幕”媒体(例如与“打印”媒体相对)。

要定位分辨率，您可以使用 min-resolution and max-resolution .