Question

好吧，所以过去几天我的媒体查询和标题/导航一直存在问题，而且我疯了。我对Web开发很新，对媒体查询也是新手。我觉得这段代码存在很多错误和问题，但我仍然只是想学习。

以下是我正在处理的当前部分，由于某些原因，此查询中只有少数几个方面可用（例如div.container中的红色背景），但其他方面则没有。老实说，在这一点上，我只是想让导航和标题适合设备。此外，我不确定为什么div.container的每一侧都有这么多额外的空白区域。我肯定会对此感到沮丧，但我希望该网站至少看起来不错。其中一些属性是为了看到变化而添加的，所以要温柔哈哈。

基本上问题是我不能让标题/导航在主页上响应。它似乎在除了家庭之外的所有其他页面上工作。

@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;
  }
}

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

here is the site

Answer 1

注释掉.site-header的宽度属性

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

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

通过对该媒体资源进行评论，您可以将width规范的任务委托给浏览器和Chrome（我仅在Chrome中检查过）正确猜到了width所需

导航/标题和媒体查询问题

1 个答案: