时间戳

首页 > 解决方案 > css媒体不工作，是什么问题？

html - css媒体不工作，是什么问题？

问题描述

这个问题已经被问了一百万次，我已经按照答案进行了操作，但它仍然不起作用。我究竟做错了什么？我脑子里有

<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>

标签： htmlcssmedia-queries

解决方案

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

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

推荐阅读