添加媒体查询时，我的 javascript 代码不起作用？

Question

以前从来没有遇到过这个问题。 基本上我通过Javascript在我的标题上添加了一个类列表切换，它通常工作正常，但是当我添加与标题无关的媒体查询时，它停止工作。 如果您需要更多信息，请告诉我。 有任何想法吗？ 我迷路了

编辑：添加了额外的 HTML 代码

这是我所有的代码

 window.addEventListener('scroll', () => { let header = document.querySelector('.page-header'); header.classList.toggle('sticky', window.scrollY > 30); })

 .page-header { width: 100%; height: 60px; background-color: var(--main-bg-color); display: flex; flex-direction: row; align-items: center; color: white; font-weight: bold; overflow: hidden; position: fixed; transition: .7s; z-index: 1; } .page-header.sticky { background-color: white; color: black; position: fixed; z-index: 1; transition: .7s; box-shadow: 5px 5px 3px lightgray; } .portfolio-images { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; margin-top: 50px; } .portfolio-images img { margin-right: auto; margin-left: auto; } .portfolio-images img:hover { filter: brightness(.4); transition: .4s; cursor: pointer; } /* media queries */ @media all and (max-width: 1275px) { .portfolio-images { grid-template-columns: 1fr 1fr; } .portfolio-images img { width: 40vw; height: auto; } @media all and (max-width: 500px) { .portfolio-images { grid-template-columns: 1fr; } .portfolio-images img { width: 90vw; height: auto; } }

 <div class="page-header"> <h1 id="logo">ParallaxStudios</h1> <div class="navigation-container"> <ul> <li><a class="navigation-item">Portfolio</a></li> <li><a class="navigation-item">Socials</a></li> <li><a class="navigation-item">Staff</a></li> </ul> </div> <div class="rightside-navigation"> <h3 id="contact">Contact</h3> </div> </div> <div class="portfolio-container"> <h1>Current Projects</h1> <div class="portfolio-images"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> <img src="https://via.placeholder.com/420"> </div> </div>

Answer 1

在此处的媒体查询之一的末尾，您确实缺少一个} ：

@media all and (max-width: 1275px) {
    .portfolio-images {
      grid-template-columns: 1fr 1fr;
    }
    .portfolio-images img {
      width: 40vw;
      height: auto;
  }
} //this one was missing.
  
  @media all and (max-width: 500px) {
    .portfolio-images {
      grid-template-columns: 1fr;
    }
    .portfolio-images img {
      width: 90vw;
      height: auto;
    }
  }