Navigation/Header 和媒体查询问题

Question

好吧，过去几天我的媒体查询和 header/navigation 一直有问题，我快疯了。我对网络开发还很陌生，对媒体查询更陌生。我感觉这段代码有很多错误和问题，但我仍在努力学习。

这是我正在处理的当前部分，出于某种原因，只有少数方面在此查询中起作用（例如 div.container 中的红色背景），但其他方面则不起作用。老实说，此时我只是想让导航和 header 适合设备。另外我不确定为什么 div.container 的每一边都有这么多额外的白色 space。我确实有点吃不消了，但我想让这个网站至少暂时看起来还不错。其中一些属性是为了看到变化而添加的，所以要温和哈哈。

基本上问题是我无法让 header/navigation 在主页上响应。它似乎适用于除主页以外的所有其他页面。

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  div.site-logo {
    width: 40%;
  }
  div.body {
    max-width: 1160px;
    width: 100%;
    background: blue;
  }
  /* Header */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    width: 100%;
    z-index: 1000;
    background: #FFFFFF;
    -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;
    margin: auto 0;
  }
  /* General Layout */
  div.container {
    width: 320px;
    background: red;
  }
  /* Content Area */
  article.post {
    border-bottom: 2px dotted #bbbbbb;
    height: 200px;
  }
  /*Main Column */
  .main-column {
    width: 100%;
  }
  /* Sidebar Column */
  .secondary-column {
    width: 30%;
    float: right;
  }
}

我也为我在使用本网站时缺乏知识而提前道歉。这是我的第一个post。

here is the site

Answer 1

注释掉 .site-header

的宽度属性

.site-header {
/* width:100%;*/
}

注意：问题的根源在于您错误地使用了 CSS 属性，即使用 padding of <body> 而不是 margin on <div class="container">。因为它 width:100% on .site-header 总是会给出比实际可见的宽度更多的宽度。

通过注释掉属性，您将 width 规范的任务委派给浏览器并且 Chrome（我仅签入了 chrome）正确猜到了 width 需要

Navigation/Header 和媒体查询问题

Navigation/Header and media query issues

html

css

navigation

media-queries