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 */
    }
}

Answer 2

您想要的并不是很清楚，但为了让您的图片跨越所有尺寸的整个宽度，您可以添加以下规则：

.banner img {
  width: 100%;
}

这将调整在容器内的大小（其宽度为100％，因此最终图像将跨越宽度）。

BTW：.banner是DIV，无论如何都是100％宽，所以你实际上可以删除.banner

的100％宽度

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;
}
.banner img {
  width: 100%;
}

<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="#"><img src="http://placehold.it/1200x90/fa0" alt="אפייה חורפית" /></a>
  </div>
</header>

Answer 3

设备宽度不是宽度的正确值。使用：＆lt; meta name =“viewport”content =“width = device-width，initial-scale = 1”＆gt;

width属性控制视口的大小。它可以设置为特定数量的像素，例如width = 600，或者设置为特殊值device-width，它是CSS像素中屏幕的宽度，比例为100％。

初始缩放属性控制首次加载页面时的缩放级别。最大规模，最小规模和用户可扩展属性控制用户如何放大或缩小页面。

Answer 4

当您使用媒体查询时，如果声明级联，则必须更改继承属性。如果您在主体上设置了Backgruond图像，则需要查询以取消背景图像。

关键字“only”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样。

css - @media不起作用

4 个答案: