在较小的屏幕上将 NavBar 显示在彼此之上

Question

仅限@media（手机、平板电脑）。

-仅当页面尺寸变小时，在PC以外的小屏幕上！

我想在顶部中间显示我的徽标，（当屏幕变小时）
Logo 下的 NavBar 为整行，
以及导航栏和徽标右上角的订阅按钮
（在他们中间的右边）但是我好像做不对！

我在 PC 显示器上正确设置了所有内容，但是当涉及到“@media screen”时，我不知道我做错了什么

请帮忙。下面是我的代码！
注意：我不知道是应该更改整个 DIV 还是只更改 Nav 以使效果发生！

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-ms-viewport {
  width: device-width;
}

body {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-left: 10%;
  padding-right: 10%;
}

@media screen and (max-width: 500px) {
  .hero {
    width: 100%;
    background: #F00;
    display: inline-block;
  }
  ul {
    list-style: none;
    width: 100%;
    background: #FF0;
  }
  li {
    float: left;
    margin-right: 10px;
    background: #FF0;
  }
  .button1 {
    position: absolute;
    display: inline-block;
    top: 70px;
    right: 10px;
  }
}

.logo {
  color: white;
  font-size: 28px;
}

.span1 {
  color: white;
  font-size: 20px;
  background-color: #ea1538;
  border-radius: 30px;
  padding: 5px 8px;
}

span {
  color: #ea1538;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: 0.5s;
}

nav ul li a:hover {
  color: white;
  transition: 0.3s;
  border-radius: 30px;
  background-color: #ea1538;
  padding: 8px 12px;
}

#active {
  color: white;
  background: #ea1538;
  padding: 5px 8px;
  border-radius: 30px;
}

.button1 {
  border: none;
  background: #ea1538;
  padding: 12px 20px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  transition: 0.5s;
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.button1:hover {
  transform: scale(1.2);
  transition: ease 0.5s;
  cursor: pointer;
}

.footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
  padding: 50px;
  color: white;
  background: #262626;
}

.footer>* {
  flex: 1 100%;
}

.l-footer {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

h2 {
  font-weight: 900;
  font-size: 16px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
  transition: ease 0.3s;
}

.footer a:hover {
  background-color: #ea1538;
  padding: 3px 5px;
  border-radius: 30px;
  transition: ease 0.3s;
  color: white;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.r-footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
}

.r-footer>* {
  flex: 1 50%;
  margin-right: 1.25em;
}

.box a {
  text-decoration: none;
  color: #999;
}

.h-box {
  column-count: 2;
  column-gap: 1.25em;
}

.b-footer {
  text-align: center;
  color: #999;
  padding-top: 50px;
}

.l-footer p {
  padding-right: 20%;
  color: #999;
}

@media screen and (min-width: 600px) {
  .r-footer>* {
    flex: 1;
  }
  .features {
    flex-grow: 2;
  }
  .l-footer {
    flex: 1 0px;
  }
  .r-footer {
    flex: 2 0px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
  <link rel="icon" type="images" href="/images/favicon.ico" />
  <link rel="stylesheet" href="Styles/style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />

  <title>myPage</title>
</head>

<body>
  <!-- Navbar and Logo -->
  <div class="hero">
    <nav>
      <center>
        <h2 class="logo">
          Be <span>Smart</span> <br />
          <span class="span1">Technologies</span>
        </h2>
      </center>
      <ul>
        <li><a href="index.html" id="active">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <button type="button" class="button1">
              Subscribe
            </button>
    </nav>
  </div>
  <!-- Main Page Goes Below -->

  <!-- End Of Main Page-->

  <!-- BR Page Space (Give more space below) -->
  <div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
  <!-- Footer and Properties -->
  <footer class="footer">
    <div class="l-footer">
      <h1>
        Be <span>Smart</span> <br /><span class="span1">Technologies</span>
      </h1>
      <br />
      <p>
        Be Smart Technologies or <em>BST</em> is a company that creates websites, portfolios, responsive pages and designs! Feel free to join us and contact us if you have any questions or new ideas! You can be our next partner!
      </p>
    </div>
    <ul class="r-footer">
      <li>
        <h2>Explore</h2>
        <ul class="box">
          <li><a href="#bottom">Home</a></li>
          <li><a href="#bottom">Portfolio</a></li>
          <li><a href="#bottom">About</a></li>
          <li><a href="#bottom">Contact</a></li>
        </ul>
      </li>
      <li class="features">
        <h2>Need Help?</h2>
        <ul class="box h-box">
          <li><a href="#bottom">Blog</a></li>
          <li><a href="#bottom">Pricing</a></li>
          <li><a href="#bottom">Sales</a></li>
          <li><a href="#bottom">Certifications</a></li>
          <li><a href="#bottom">Customer Services</a></li>
        </ul>
      </li>
      <li>
        <h2>Legal</h2>
        <ul class="box">
          <li><a href="#bottom">Privacy Policy</a></li>
          <li><a href="#bottom">Terms of Use</a></li>
          <li><a href="#bottom">Contract</a></li>
        </ul>
      </li>
    </ul>

    <div class="b-footer">
      <p>All Rights Reserved by &copy;BeSmart Technologies 2022</p>
    </div>
  </footer>
</body>

</html>

Answer 1

正如 Kameron 的评论所说，不太清楚它应该是什么样子。不过我试过了。

/*@media screen and (max-width: 500px) {*/
  .hero {
    width:100%;
    background:#F00;
    display: inline-block;
  }
  ul {
    list-style:none;
    width:100%;
    background:#FF0;
  }
  li {
    float:left;
    margin-right:10px;
    background:#FF0;
  }
  .button1 {
    position:absolute;
    display:inline-block;
    top:70px;
    right:10px;
  }
/*}*/

<div class="hero">
  <nav>
    <center><h2 class="logo">
      Be <span>Smart</span> <br />
      <span class="span1">Technologies</span>
    </h2></center>
    <ul>
      <li><a href="index.html" id="active">Home</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <button type="button" class="button1">
      Subscribe
    </button>
  </nav>
</div>

Answer 2

您需要将 nav 设置为 flex-direction: column; 以使徽标在顶部，导航栏在下方显示全宽。然后你可以在同一个媒体查询中定位 button1。

见下文：

@media screen and (max-width: 800px) {
  nav {
    flex-direction: column;
  }
  .button1 {
    position: absolute;
    display: inline-block;
    top: 30px;
    right: 10px;
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-ms-viewport {
  width: device-width;
}

body {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-left: 10%;
  padding-right: 10%;
}

.logo {
  color: white;
  font-size: 28px;
}

.span1 {
  color: white;
  font-size: 20px;
  background-color: #ea1538;
  border-radius: 30px;
  padding: 5px 8px;
}

span {
  color: #ea1538;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: 0.5s;
}

nav ul li a:hover {
  color: white;
  transition: 0.3s;
  border-radius: 30px;
  background-color: #ea1538;
  padding: 8px 12px;
}

#active {
  color: white;
  background: #ea1538;
  padding: 5px 8px;
  border-radius: 30px;
}

.button1 {
  border: none;
  background: #ea1538;
  padding: 12px 20px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  transition: 0.5s;
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.button1:hover {
  transform: scale(1.2);
  transition: ease 0.5s;
  cursor: pointer;
}

.footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
  padding: 50px;
  color: white;
  background: #262626;
}

.footer>* {
  flex: 1 100%;
}

.l-footer {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

h2 {
  font-weight: 900;
  font-size: 16px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
  transition: ease 0.3s;
}

.footer a:hover {
  background-color: #ea1538;
  padding: 3px 5px;
  border-radius: 30px;
  transition: ease 0.3s;
  color: white;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.r-footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
}

.r-footer>* {
  flex: 1 50%;
  margin-right: 1.25em;
}

.box a {
  text-decoration: none;
  color: #999;
}

.h-box {
  column-count: 2;
  column-gap: 1.25em;
}

.b-footer {
  text-align: center;
  color: #999;
  padding-top: 50px;
}

.l-footer p {
  padding-right: 20%;
  color: #999;
}

@media screen and (min-width: 600px) {
  .r-footer>* {
    flex: 1;
  }
  .features {
    flex-grow: 2;
  }
  .l-footer {
    flex: 1 0px;
  }
  .r-footer {
    flex: 2 0px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
  <link rel="icon" type="images" href="/images/favicon.ico" />
  <link rel="stylesheet" href="Styles/style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />
  <title>myPage</title>
</head>
<body>
  <!-- Navbar and Logo -->
  <div class="hero">
    <nav>
      <center>
        <h2 class="logo">
          Be <span>Smart</span> <br />
          <span class="span1">Technologies</span>
        </h2>
      </center>
      <ul>
        <li><a href="index.html" id="active">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <button type="button" class="button1">
              Subscribe
            </button>
    </nav>
  </div>
  <!-- Main Page Goes Below -->

  <!-- End Of Main Page-->

  <!-- BR Page Space (Give more space below) -->
  <div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
  <!-- Footer and Properties -->
  <footer class="footer">
    <div class="l-footer">
      <h1>
        Be <span>Smart</span> <br /><span class="span1">Technologies</span>
      </h1>
      <br />
      <p>
        Be Smart Technologies or <em>BST</em> is a company that creates websites, portfolios, responsive pages and designs! Feel free to join us and contact us if you have any questions or new ideas! You can be our next partner!
      </p>
    </div>
    <ul class="r-footer">
      <li>
        <h2>Explore</h2>
        <ul class="box">
          <li><a href="#bottom">Home</a></li>
          <li><a href="#bottom">Portfolio</a></li>
          <li><a href="#bottom">About</a></li>
          <li><a href="#bottom">Contact</a></li>
        </ul>
      </li>
      <li class="features">
        <h2>Need Help?</h2>
        <ul class="box h-box">
          <li><a href="#bottom">Blog</a></li>
          <li><a href="#bottom">Pricing</a></li>
          <li><a href="#bottom">Sales</a></li>
          <li><a href="#bottom">Certifications</a></li>
          <li><a href="#bottom">Customer Services</a></li>
        </ul>
      </li>
      <li>
        <h2>Legal</h2>
        <ul class="box">
          <li><a href="#bottom">Privacy Policy</a></li>
          <li><a href="#bottom">Terms of Use</a></li>
          <li><a href="#bottom">Contract</a></li>
        </ul>
      </li>
    </ul>
    <div class="b-footer">
      <p>All Rights Reserved by &copy;BeSmart Technologies 2022</p>
    </div>
  </footer>
</body>
</html>

在较小的屏幕上将 NavBar 显示在彼此之上

Display NavBar on top of each other in smaller screens

html

css

flexbox

media-queries