html - css - @media 不工作

Question

好的，我找到了一个解决方案:使用 @media 我分别访问图像的宽度和条形并且它正在工作，但是有没有更短的代码方式？

我在互联网上搜索了解决方案，但到目前为止，我所找到的都没有帮助我。

我试图让我的标题响应浏览器的宽度，但它不起作用。

我试图只使图像响应或只使顶部栏但没有任何效果...

有什么想法吗？

<header class="header">
  <div class="top-bar">
    <div class="nav-container">
      <ul class="navbar">
        <li><a href="#החשבון שלי">החשבון שלי</a></li>
        <li><a href="#המתכונים שלי">המתכונים שלי</a></li>
        <li><a href="#אודות">אודות</a></li>
        <li class="last-btn"><a href="#צרו קשר">צרו קשר</a></li>
      </ul>
    </div>
  </div>
  <div class="banner">
    <a href="#banner"><img src="Images\maadanot_winter_banners.jpg" alt="אפייה חורפית"/></a>
  </div>
</header>

这是CSS:

body {
margin: 0;
}

.top-bar {
    width: 100%;
    background-color: #404040;
    padding: 12px;
}

.nav-container {
    width: 68%;
    margin: auto;
}

.navbar {
    margin: 0;
    list-style-type: none;
    background-color: #404040;
    display: table;
    font-family: Helvetica;
    font-size: 14px;
}

.navbar li {
    display: table-cell;
    border-left: 1px solid white;
    padding: 0px 10px;
    overflow: hidden;
    width: 85px;
    text-align: center;
}

.navbar a {
    color: white;
    text-decoration: none;
}

.navbar a:hover {
    font-weight: bold;
}

@media screen and (max-width:900px) {
    .header {
        width: 100%;
    }
}

.banner {
    margin-top: 33px;
    width: 100%;
    text-align: center;
}

Answer 1

试着改成:

@media screen and (max-width:900px) {
    .header {
        width: 100vw; /* viewport width */
    }
}