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）进行验证，您可能会看到已应用更改。

CSS媒体无法正常工作，这是什么问题？

1 个答案: