尝试将搜索合并到响应式菜单中的问题

Question

我正在尝试制作一个响应式菜单 - 我对桌面版本很满意，但我搞砸了它的移动版本。

在小于 600 像素的屏幕上，如何让搜索栏出现在汉堡包中（最好是在顶部，文本框旁边有搜索图标）而不是在该行下方？

（我也在尝试让菜单栏变得有粘性，并将主页替换为仅低于 600 像素的徽标，但一次只做一件事......）

感激地，感激地，感激地接受任何帮助。非常感谢！

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

html {
    font-family: 'Bree Serif', serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  color: orange;
}

h2 {
  font-weight: bold;
  font-size: 24px;
  display: inline;
  margin: 0;
}

/* Reset padding and margin which gives us full width colour bars when required */
body {
padding: 0;
margin: 0;
}


div.header {
padding: 20px;
font-size: 24px;
  color: white;
        background: #DD1100;
}

div.mainBlog{
padding: 20px;
font-size: 18px;
}

div.mainPanelMobile{
padding: 20px;
font-size: 18px;
}


div.mainPanel2{
padding: 20px;
background: yellow;
font-size: 18px;
}

div.footer {
padding: 20px;
font-size: 16px;
  color: white;
        background: #DD1100;
}

/* =============================================================== */

/* For mobile phones: any relevant code goes below */
/* if I want to make it invisible I need to add: */
/* position: absolute; */
/* left: -9999px; */
@media (max-width: 720px) {

div.mainPanel {
        background: white;
  padding: 20px;
}



}

/* =============================================================== */

/* For tablet computers: */
@media (min-width: 721px) and (max-width: 1199px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
  padding: 20px;
}

div.mainPanel {
        background: white;
  padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}

div.footer{
padding: 20px;
}

.sidebar {
    padding-left: 0px;
}

}

/* =============================================================== */

/* For desktop computers: */
@media (min-width: 1200px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

.left {
    width: 70%;
    float: left;
}

.right {
    width: 30%;
    float: left;
}

.sidebar {
    padding-left: 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
padding: 20px;
}

div.mainPanel {
        background: white;
padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}


div.footer{
padding: 20px;
}

}

/* =============================================================== */


/* This section is the CSS for the responsive menu: */

.topnav {
  overflow: hidden;
  background-color: #EEE;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}


/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

.topnav .search-container {
  float: left;
}
.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}



}


/* =============================================================== */

<!DOCTYPE html>
<html>
    
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
    
  <body>
    
    <div class="wholeAreaIndex">
    
      <! –– header ––>
      <div class="header">
      Title
      </div>
    
      <! –– menu ––>
      <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
        <div class="search-container">
          <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
      </div>
    
      <! –– content  ––>
    
      <div class="mainPanel" style="background-color:yellow;">
        Hello! This is a header.
      </div>
    
      <div class="mainPanel">
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      </div>
    
      <! –– footer ––>
      <div class="footer">
      Footer
      </div>
    
    
    </div>
    
  </body>
</html>

Answer 1

1. 第一件事是您有 2 个最大宽度的媒体查询 600 像素。一套就够了。
2. 然后我在课堂上添加了您的 600px 视图：.topnav a:not(:first-child) like .topnav a:not(:first-child), .topnav .search-container like this，它将像其他块一样工作 超过。就像搜索栏一样，display none 也是如此
3. 然后我将.topnav.responsive .search-container 添加到现有的 .topnav.responsive a 显示。并添加了设置搜索栏的顺序 在顶部

  .topnav.responsive .search-container{
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive a:first-child, .topnav.responsive .search-container{
    order: -1;
  }
  .topnav.responsive .search-container form{
    display:flex;
  }

4. 为了使orderworks，我还需要在容器中添加display flex，如下所示

.topnav.responsive {
    position: relative;
    display:flex;
    flex-direction: column;
  }

演示

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

html {
    font-family: 'Bree Serif', serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  color: orange;
}

h2 {
  font-weight: bold;
  font-size: 24px;
  display: inline;
  margin: 0;
}

/* Reset padding and margin which gives us full width colour bars when required */
body {
padding: 0;
margin: 0;
}


div.header {
padding: 20px;
font-size: 24px;
  color: white;
        background: #DD1100;
}

div.mainBlog{
padding: 20px;
font-size: 18px;
}

div.mainPanelMobile{
padding: 20px;
font-size: 18px;
}


div.mainPanel2{
padding: 20px;
background: yellow;
font-size: 18px;
}

div.footer {
padding: 20px;
font-size: 16px;
  color: white;
        background: #DD1100;
}

/* =============================================================== */

/* For mobile phones: any relevant code goes below */
/* if I want to make it invisible I need to add: */
/* position: absolute; */
/* left: -9999px; */
@media (max-width: 720px) {

div.mainPanel {
        background: white;
  padding: 20px;
}



}

/* =============================================================== */

/* For tablet computers: */
@media (min-width: 721px) and (max-width: 1199px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
  padding: 20px;
}

div.mainPanel {
        background: white;
  padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}

div.footer{
padding: 20px;
}

.sidebar {
    padding-left: 0px;
}

}

/* =============================================================== */

/* For desktop computers: */
@media (min-width: 1200px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

.left {
    width: 70%;
    float: left;
}

.right {
    width: 30%;
    float: left;
}

.sidebar {
    padding-left: 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
padding: 20px;
}

div.mainPanel {
        background: white;
padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}


div.footer{
padding: 20px;
}

}

/* =============================================================== */


/* This section is the CSS for the responsive menu: */

.topnav {
  overflow: hidden;
  background-color: #EEE;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}


/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .topnav .search-container {
    display: none;
    }
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .topnav.responsive {
    position: relative;
    display:flex;
    flex-direction: column;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a,
  .topnav.responsive .search-container{
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive a:first-child,
  .topnav.responsive .search-container{
    order: -1;
  }
  .topnav.responsive .search-container form{
    display:flex;
  }

.topnav .search-container {
  float: left;
}
.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}



}


/* =============================================================== */

<!DOCTYPE html>
<html>
    
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
    
  <body>
    
    <div class="wholeAreaIndex">
    
      <! –– header ––>
      <div class="header">
      Title
      </div>
    
      <! –– menu ––>
      <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
        <div class="search-container">
          <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
      </div>
    
      <! –– content  ––>
    
      <div class="mainPanel" style="background-color:yellow;">
        Hello! This is a header.
      </div>
    
      <div class="mainPanel">
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
      </div>
    
      <! –– footer ––>
      <div class="footer">
      Footer
      </div>
    
    
    </div>
    
  </body>
</html>

Answer 2

我更新了你的 sn-p 以修复搜索栏和粘性菜单。

多次使用相同的@media 查询。请尝试将所有代码放在一个媒体查询@media screen and (max-width: 600px) 下，一个媒体查询足以满足 600px 视口。这对于干净和语义化的代码来说更好。

始终应该显示搜索栏。见专业 UI https://miro.medium.com/proxy/1*ILvNVFYka8q04RrsHTvkKA.png 搜索栏不应该在汉堡包里。应该相当于汉堡包和家。

请在 CSS 下方更新/添加以修复@media screen and (max-width: 600px) 末尾的问题。

您只需要更新此 CSS。

.topnav .search-container {
    position:absolute;
    left: 74px;
    top:0px;
}
.topnav {
    position: fixed !important;
    top: 73px;
    width: 100%;
    left: 0;
}
.wholeAreaIndex {
    padding-top: 124px;
}
.search-container form {
    display:flex;
}
.topnav .search-container button {
    float: right;
    padding: 6px 10px;
    margin-top: 0px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}
.header {
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
}

我在 CSS 上面更新的内容：-

搜索：-

请将元素 .topnav .search-container 设置为 position: absolute 相对/固定到定位的祖先 .topnav。

菜单栏粘滞：- 请设置元素 .header 和 .topnav 的位置：固定到粘性菜单并相应地设置 .wholeAreaIndex 和 padding-top:。

更新了 sn-p :-

  html {
    font-family: 'Bree Serif', serif;
}

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

a:link {
  color: blue;
}

a:visited {
  color: blue;
}

a:hover {
  color: orange;
}

h2 {
  font-weight: bold;
  font-size: 24px;
  display: inline;
  margin: 0;
}

/* Reset padding and margin which gives us full width colour bars when required */
body {
padding: 0;
margin: 0;
}


div.header {
padding: 20px;
font-size: 24px;
    color: white;
        background: #DD1100;
}

div.mainBlog{
padding: 20px;
font-size: 18px;
}

div.mainPanelMobile{
padding: 20px;
font-size: 18px;
}


div.mainPanel2{
padding: 20px;
background: yellow;
font-size: 18px;
}

div.footer {
padding: 20px;
font-size: 16px;
    color: white;
        background: #DD1100;
}

/* =============================================================== */

/* For mobile phones: any relevant code goes below */
/* if I want to make it invisible I need to add: */
/* position: absolute; */
/* left: -9999px; */
@media (max-width: 720px) {

div.mainPanel {
        background: white;
    padding: 20px;
}



}

/* =============================================================== */

/* For tablet computers: */
@media (min-width: 721px) and (max-width: 1199px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
    padding: 20px;
}

div.mainPanel {
        background: white;
    padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}

div.footer{
padding: 20px;
}

.sidebar {
    padding-left: 0px;
}

}

/* =============================================================== */

/* For desktop computers: */
@media (min-width: 1200px) {

body{
        background: #FFF1E0;
        height: 100%;
        margin: 50px 20px 50px 20px;
}

.left {
    width: 70%;
    float: left;
}

.right {
    width: 30%;
    float: left;
}

.sidebar {
    padding-left: 20px;
}

div.wholeAreaIndex{
        padding: 0px 0px 0px 0px;
        max-width:1400px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.wholeAreaPage{
        padding: 0px 0px 0px 0px;
        max-width:1140px;
        background: white;    
        margin: auto;
        box-shadow: 20px 20px 16px #111111;
}

div.header {
padding: 20px;
}

div.mainPanel {
        background: white;
padding: 20px;
}

div.mainPanelMobile {
position: absolute;
left: -9999px;
}


div.footer{
padding: 20px;
}

}

/* =============================================================== */


/* This section is the CSS for the responsive menu: */

.topnav {
  overflow: hidden;
  background-color: #EEE;
}

.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}


/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

.topnav .search-container {

   position:absolute; left: 74px; top:0px;
}

.topnav {
  position: fixed !important;
  top: 73px;
  width: 100%; left: 0;
}
.wholeAreaIndex{padding-top: 124px;}
.search-container form{display:flex;}
.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 0px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.header{position: fixed;
left: 0;
width: 100%;
top: 0;}



}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<body>

<div class="wholeAreaIndex">

<! –– script for responsive menu ––>
<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

<! –– header ––>
<div class="header">
Title
</div>

<! –– menu ––>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<! –– content  ––>

<div class="mainPanel" style="background-color:yellow;">
Hello! This is a header.
</div>

<div class="mainPanel">
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
</div>

<! –– footer ––>
<div class="footer">
Footer
</div>


</div>

</body>

Answer 3

1. 如果您使用相同的 CSS 布局（可修复），您将很容易响应网页。
2. 我使用相对位置来更改相同元素的位置。 具有位置的元素：相对；相对于其正常位置进行定位。
3. 您可以使用此参考来参考 flex 布局。 https://www.w3schools.com/css/css3_flexbox.asp

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

    <style>
        html {
            font-family: 'Bree Serif', serif;
        }

        .clearfix:after {
            content: "";
            clear: both;
            display: table;
        }

        a:link {
            color: blue;
        }

        a:visited {
            color: blue;
        }

        a:hover {
            color: orange;
        }

        h2 {
            font-weight: bold;
            font-size: 24px;
            display: inline;
            margin: 0;
        }

        /* Reset padding and margin which gives us full width colour bars when required */
        body {
            padding: 0;
            margin: 0;
        }


        div.header {
            padding: 20px;
            font-size: 24px;
            color: white;
            background: #DD1100;
        }

        div.mainBlog{
            padding: 20px;
            font-size: 18px;
        }

        div.mainPanelMobile{
            padding: 20px;
            font-size: 18px;
        }


        div.mainPanel2{
            padding: 20px;
            background: yellow;
            font-size: 18px;
        }

        div.footer {
            padding: 20px;
            font-size: 16px;
            color: white;
            background: #DD1100;
        }

        /* =============================================================== */

        /* For mobile phones: any relevant code goes below */
        /* if I want to make it invisible I need to add: */
        /* position: absolute; */
        /* left: -9999px; */
        @media (max-width: 720px) {

            div.mainPanel {
                background: white;
                padding: 20px;
            }



        }

        /* =============================================================== */

        /* For tablet computers: */
        @media (min-width: 721px) and (max-width: 1199px) {

            body{
                background: #FFF1E0;
                height: 100%;
                margin: 50px 20px 50px 20px;
            }

            div.wholeAreaIndex{
                padding: 0px 0px 0px 0px;
                max-width:1400px;
                background: white;
                margin: auto;
                box-shadow: 20px 20px 16px #111111;
            }

            div.wholeAreaPage{
                padding: 0px 0px 0px 0px;
                max-width:1140px;
                background: white;
                margin: auto;
                box-shadow: 20px 20px 16px #111111;
            }

            div.header {
                padding: 20px;
            }

            div.mainPanel {
                background: white;
                padding: 20px;
            }

            div.mainPanelMobile {
                position: absolute;
                left: -9999px;
            }

            div.footer{
                padding: 20px;
            }

            .sidebar {
                padding-left: 0px;
            }

        }

        /* =============================================================== */

        /* For desktop computers: */
        @media (min-width: 1200px) {

            body{
                background: #FFF1E0;
                height: 100%;
                margin: 50px 20px 50px 20px;
            }

            .left {
                width: 70%;
                float: left;
            }

            .right {
                width: 30%;
                float: left;
            }

            .sidebar {
                padding-left: 20px;
            }

            div.wholeAreaIndex{
                padding: 0px 0px 0px 0px;
                max-width:1400px;
                background: white;
                margin: auto;
                box-shadow: 20px 20px 16px #111111;
            }

            div.wholeAreaPage{
                padding: 0px 0px 0px 0px;
                max-width:1140px;
                background: white;
                margin: auto;
                box-shadow: 20px 20px 16px #111111;
            }

            div.header {
                padding: 20px;
            }

            div.mainPanel {
                background: white;
                padding: 20px;
            }

            div.mainPanelMobile {
                position: absolute;
                left: -9999px;
            }


            div.footer{
                padding: 20px;
            }

        }

        /* =============================================================== */


        /* This section is the CSS for the responsive menu: */

        .topnav {
            overflow: hidden;
            background-color: #EEE;
        }

        .topnav a {
            float: left;
            display: block;
            color: #000000;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }

        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        .topnav a.active {
            background-color: #4CAF50;
            color: white;
        }

        .topnav .search-container {
            float: right;
        }

        .topnav input[type=text] {
            padding: 6px;
            margin-top: 8px;
            font-size: 17px;
            border: none;
        }

        .topnav .search-container button {
            float: right;
            padding: 6px 10px;
            margin-top: 8px;
            margin-right: 16px;
            background: #ddd;
            font-size: 17px;
            border: none;
            cursor: pointer;
        }

        .topnav .search-container button:hover {
            background: #ccc;
        }


        /* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
        @media screen and (max-width: 425px) {
            .topnav input[type=text] {
                float: none;
                display: block;
                text-align: left;
                width: 76vw;
                margin: 0;
                padding: 14px;
                position: relative;
                top: -1px;
                right: -3px;
            }
            .topnav .search-container {
                float: left;
                height: 53px;
            }
            .topnav input[type=text] {
                border: 1px solid #ccc;
            }
            .topnav .search-container button {
                float: right;
                padding: 15px 15px;
                margin-top: 8px;
                margin-right: 16px;
                background: #ddd;
                font-size: 17px;
                border: none;
                cursor: pointer;
                position: relative;
                top: -59px;
                left: 63px;
            }
        }

        .topnav .icon {
            display: none;
        }

        @media screen and (max-width: 600px) {
            .topnav a:not(:first-child) {display: none;}
            .topnav a.icon {
                float: right;
                display: block;
            }
        }

        @media screen and (max-width: 600px) {
            .topnav.responsive {position: relative;}
            .topnav.responsive .icon {
                position: absolute;
                right: 0;
                top: 0;
            }
            .topnav.responsive a {
                float: none;
                display: block;
                text-align: left;
            }

            .topnav .search-container {
                float: left;
            }
        }

        @media (min-width: 426px) and (max-width: 600px) {
            .topnav input[type=text] {
                float: none;
                display: block;
                text-align: left;
                width: 88%;
                margin: 0;
                padding: 14px;
            }
            .topnav input[type=text] {
                border: 1px solid #ccc;
            }
            .topnav .search-container button {
                float: right;
                padding: 15px 15px;
                margin-top: 8px;
                margin-right: 16px;
                background: #ddd;
                font-size: 17px;
                border: none;
                cursor: pointer;
                position: relative;
                top: -58px;
                left: 63px;
            }
        }
        /* =============================================================== */
    </style>
</head>

<body>

<div class="wholeAreaIndex">

    <! –– header ––>
    <div class="header">
        Title
    </div>

    <! –– menu ––>
    <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>
        <div class="search-container">
            <form action="/action_page.php">
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </div>

    <! –– content  ––>

    <div class="mainPanel" style="background-color:yellow;">
        Hello! This is a header.
    </div>

    <div class="mainPanel">
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
        Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  Hello! This is the main text of the page.  <br /><br />
    </div>

    <! –– footer ––>
    <div class="footer">
        Footer
    </div>


</div>
    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</body>
</html>