Question

我的媒体标签似乎不起作用2甚至以为我的视口标签在我脑海中。我试图降低分辨率时更改字体大小。我不确定自己在做什么错，但是会希望得到一些帮助。

<? ?>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="main.css">
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Changa One' rel='stylesheet'>
    <script src="main.js"></script>
  </head>
  <body style="background-color: #bdc3c7">
    <div class="navBar">
    </div>
    <div class="container">
      <div class="pLbl" style="font-family: 'Changa One';">
        Enter Password to enter:
      </div>
      <div>
      <input class="pInput" id="pInp" type="password"></input>
    </div>
    <div>
      <div class="tooltip">
        <button class="pBtn" onclick="pLogin()"></button>
        <span class="tooltiptext">Submit</span>
        </div>
    </div>
    </div>
  </body>
</html>


<style>
    .pLbl {
    font-size: 24px;
    color: rgb(50,50,50);
}

@media screen and (max-width: 640px)
{
  .pLbl {
  font-size 12px;
  }
  }
</style>

Answer 1

这仅仅是因为您在媒体查询中用字体大小忘记了冒号：）

PS：尽管现代浏览器对无效HTML进行了代码更正，但我建议您将样式标签放在头上，声明doctype并使用自动关闭标签编写输入。

媒体查询不起作用，即使我有头部标签

1 个答案: