为什么移动媒体查询在移动设备上不起作用

Question

我知道这是一个愚蠢的问题，但我在使用小屏幕媒体查询时遇到了问题。我给图像设置了 class，所以它应该可以工作。另外，当我尝试添加一个 id 时，它不起作用，所以我的代码或媒体查询有问题吗？如有任何帮助或建议，我们将不胜感激。

@media only screen and (max-width : 600px){

.mondaycont .monday{
  position: relative;
  width: 20em;
  margin-top: 10px;

}

}

.mondaycont{

  width: 84%;
}

.mondaycont .monday{
  position: relative;
  width: 40em;
  margin-top: 20px;

}

.mondaytext{
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: white;
  margin-top: 50px;
  position: relative;

}


.mondaytextbold{
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  color: white;
  margin-top: 10px;
  position: relative;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERROR 404</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <style>body{background-color: #262626;}</style>
    <div class="container text-center"><p class=" mondaytext">This page feels like a monday...</p>
    <a href="./index.html"><p class=" mondaytextbold">Go Home</p></a> </div>
    
    <div class="container-fluid mondaycont text-center">
        <img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>
</html>

Answer 1

您的媒体查询后跟一个适用于所有分辨率的声明，覆盖您的媒体查询宽度定义。媒体查询不影响特异性，因此应用正常的“最后一条规则获胜”。

交换这两条规则的位置：

.mondaycont .monday {
  position: relative;
  width: 40em;
  margin-top: 20px;
}

@media only screen and (max-width: 600px) {
  .mondaycont .monday {
    position: relative;
    width: 20em;
    margin-top: 10px;
  }
}

.mondaycont {
  width: 84%;
}

.mondaytext {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: white;
  margin-top: 50px;
  position: relative;
}

.mondaytextbold {
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  color: white;
  margin-top: 10px;
  position: relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ERROR 404</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <style>
    body {
      background-color: #262626;
    }
  </style>
  <div class="container text-center">
    <p class=" mondaytext">This page feels like a monday...</p>
    <a href="./index.html">
      <p class=" mondaytextbold">Go Home</p>
    </a>
  </div>

  <div class="container-fluid mondaycont text-center">
    <img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>

</html>

为什么移动媒体查询在移动设备上不起作用

why the mobile media query is not working on mobile

css

media-queries