CSS媒体查询失效求助：屏幕小于1052px时样式未按预期生效

我在Angela Yu的Web开发课程项目中尝试实现：当屏幕宽度小于1052px时，将.title-image的position设为static，使其占满视口宽度，但目前该样式仅在屏幕宽度小于992px时才生效。

现有代码 #

CSS代码 #

.title-image {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  right: 25%;
}

media (max-width: 1052px) {
  .title-image {
    position: static;
  }
}

HTML代码 #

<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>tindog</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
    rel="stylesheet">

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/b2df711599.js" crossorigin="anonymous"></script>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- JS and Jquery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

</head>

<body>
  <!-- Title -->
  <div class="row">
    <div class="col-lg-6">
      <h1>Meet new and interesting dogs nearby.</h1>
      <button type="button" class="btn btn-lg btn-dark download-button"><i class="fa-brands fa-apple"></i>
            Download</button>
      <button type="button" class="btn btn-lg btn-outline-light download-button"><i
              class="fa-brands fa-google-play"></i> Download</button>
    </div>
    <div class="col-lg-6">
      <img class="title-image" src="https://via.placeholder.com/400" alt="iphone-mockup">
    </div>
  </div>
</body>

当前效果截图 #

解决方案 #

问题核心是媒体查询语法错误，同时缺少让图片占满宽度的必要样式，修正后的CSS代码如下：

.title-image {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  right: 25%;
}

/* 修正媒体查询语法，补充布局样式 */
@media (max-width: 1052px) {
  .title-image {
    position: static;
    width: 100%; /* 让图片占满父容器宽度 */
    transform: rotate(0); /* 可选：取消旋转，根据视觉需求调整 */
    right: auto; /* 重置绝对定位的偏移属性 */
  }
}

关键修正说明： #

1. 媒体查询必须以@开头，浏览器才能正确识别，这是样式不生效的根本原因
2. 添加width: 100%直接实现图片占满视口宽度的需求
3. 重置transform: rotate(0)：绝对定位时的旋转效果在静态布局下可能不符合视觉预期，可根据实际需求保留或删除
4. 重置right: auto：清除绝对定位时设置的偏移值，避免干扰静态布局的正常排列

另外，你使用了Bootstrap的col-lg-6栅格类，该类在屏幕宽度≥992px时为两列布局，<992px时自动堆叠成单列。如果需要在1052px以下就让图片容器占满整行，可以将栅格类改为col-xl-6（Bootstrap 4的xl断点为1200px），这样在屏幕宽度<1200px时就会触发堆叠，配合上述CSS即可实现更贴合需求的布局。

内容的提问来源于stack exchange，提问作者MitraPandit