html - Css 媒体不工作，有什么问题？

Question

这个问题已经被问过一百万次了，我已经按照答案做了，但还是不行。我究竟做错了什么？我脑子里有

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

这是初始的CSS

    .navbar-nav{
          float:right;
          font-family: 'Playfair Display', serif;
      }

这是媒体查询:

@media only screen and (max-width: 800px) {
  .navbar-nav{
    float:right;
    font-family: 'Playfair Display', serif;
    font-size: 50px;
  }
}

我添加了字体大小，以便我可以直观地确定它是否有效，但 id 没有。我做错了什么？

这是我的头:

  <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Stuff</title>
<meta name="description" content="Simplified Bootstrap template with sticky menu">
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css? 
family=Knewave|Merriweather|Playfair+Display" rel="stylesheet">
<link href="css/sticky-menu.css" rel="stylesheet">
<script src="js/form.js"></script>

Answer 1

如果您的显示宽度大于 800 像素，您的媒体查询将不匹配。

尝试通过将 max-width 设置为一个非常大的数字(例如 10000)来进行验证，您可能会看到更改已应用。