如何在移动设备上拆分 header 行

Question

我有一个非常简单的网站 header - 标题在左侧，菜单项在右侧。问题是它在屏幕分辨率较小的移动设备上看起来很糟糕。

当左边没有菜单项时，我不想在右边显示菜单项。任何想法如何以最简单的方式实施？我尝试了一些样式，但没有找到任何效果很好的东西。

标准视图（在 PC 上）：

当前移动视图：

简化代码（我实际上使用的是 SASS，而不是 head 中嵌入的 CSS 样式）：

<html>
  <head>
      <style>
      .header {
          position: relative;
          min-height: 50px;
      }

      .title {
          font-size: 3em;
          font-weight: 300;
          line-height: 50px;
          letter-spacing: -1px;
          margin-bottom: 0;
          float: left;
      }      

      .navigation {
        line-height: 50px;
        float: right;
      }     
      </style>
  </head>
<body>
  <header class="header">
    <div>
      <a class="title" href="/">Webpage Title</a>
      <nav class="navigation">
          <a href="#">About</a>
          <a href="#">Project</a>
          <a href="#">Contact</a>
      </nav>
    </div>
  </header>  
</body>
</html>

Answer 1

像这样将 @media query 添加到您的 CSS：

.header {
    position: relative;
    min-height: 50px;
}

.title {
    font-size: 3em;
    font-weight: 300;
    line-height: 50px;
    letter-spacing: -1px;
    margin-bottom: 0;
    float: left;
}      

.navigation {
  line-height: 50px;
  float: right;
} 

@media screen and (max-width: 767px) {
    .title { display: none; }
}

<header class="header">
   <div>
     <a class="title" href="/">Webpage Title</a>
     <nav class="navigation">
         <a href="#">About</a>
         <a href="#">Project</a>
         <a href="#">Contact</a>
     </nav>
   </div>
 </header>

如何在移动设备上拆分 header 行

How to split the header line on mobile devices

html

css

responsive-design