导航栏宽度响应似乎不起作用答案

【问题标题】：Navigation-bar width responsiveness doesn't seem to work导航栏宽度响应似乎不起作用
【发布时间】：2021-05-27 03:23:05
【问题描述】：

我一直在尝试为移动设备设置导航栏，但导航栏似乎没有根据提供的@media 查询进行操作。

.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}


/* END */

* {
  box-sizing: border-box;
  margin: 0%;
  padding: 0%;
  /* background-color:#1d1b1b; */
}

body {
  background-color: #161A1A;
  color: white;
  background-repeat: space;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

nav {
  width: 100%;
  position: static;
  display: flex;
  height: 4rem;
  /* border-radius: 0px 0px 0px 0px; */
  /* box-shadow: 100px 100px 200px rgb(248, 213, 11); */
  scroll-padding: 1rem 0 0 0;
}

.nav-logo {
  font-weight: bold;
  align-items: center;
  /* justify-content: center; */
  padding-left: 1rem;
  display: flex;
  width: 50%;
  height: 100%;
  font-family: 'Rock Salt', cursive;
  /* background-color: yellow; */
}

.nav-links {
  display: inline-flex;
  width: 50%;
  /* background-color: teal; */
  /* justify-content: center; */
  height: 100%;
  padding-left: 3rem;
}

.nav-links ul {
  justify-content: center;
  align-items: center;
  display: inline-flex;
  list-style: none;
  height: 100%;
  width: 80%;
  /* background-color: tan; */
}

.nav-links ul li {
  width: 10%;
  position: relative;
  overflow: hidden;
  display: flexbox;
  flex-direction: row;
  font-weight: bold;
  height: 100%;
  width: 100%;
  /* background-color:firebrick ; */
}

.nav-links ul li a {
  position: relative;
  display: flexbox;
  flex-direction: column;
  /* justify-content: space-evenly; */
  align-items: center;
  text-decoration: none;
  margin: 0 .5em 4em 0;
  /* background-color: darkgrey; */
  color: white;
}

.nav-links ul li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease-in-out;
  transition-delay: 0s;
}

.nav-links ul li a:hover::before {
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.2s ease-in-out;
  transition-delay: 0.3s;
}

.nav-links ul li a:hover {
  color: #f2aa4cff;
}

.nav-links ul li a span {
  /* box-shadow: 6vw 2vw  salmon; */
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  transition: 0.5s;
  justify-content: center;
  text-align-last: center;
  transition: 0.5s;
  flex-direction: column;
}

.nav-links ul li a:hover span:nth-child(1) {
  transform: translateY(-100%);
}

.nav-links ul li a:hover span:nth-child(2) {
  transform: translateY(-100%);
  animation: glow .87s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 30px #fff, 0 0 30px #fff, 0 0 30px #e60073, 0 0 30px #eb632e, 0 0 30px #6ff16f, 0 0 20px #bce600, 0 0 20px #300ef1;
  }
  to {
    text-shadow: 0 0 30px rgb(0, 0, 0), 0 0 30px #ca1c1c, 0 0 30px #f80505, 0 0 30px #ff9a02, 0 0 30px #eafa0f, 0 0 2 0px #eb117e, 0 0 20px #04ff9f;
  }
}

.intro-container {
  display: flexbox;
  padding: .2% .3% 0 3%;
}

.intro-container p {
  width: 50%;
  letter-spacing: .5px;
}


/* Below is my Responsive-CSS: */

@media all and (max-width:500px) {
  nav {
    position: fixed;
    display: flex;
    height: 4rem;
    background-color: red;
    font-size: .6rem;
  }
  .nav-logo {
    font-weight: bold;
    align-items: center;
    /* justify-content: center; */
    padding-left: 1rem;
    display: flex;
    width: 30%;
    height: 100%;
    font-family: 'Rock Salt', cursive;
    background-color: yellow;
    padding-left: 1rem;
  }
  .nav-links {
    display: inline-flex;
    width: 70%;
    background-color: teal;
    /* justify-content: center; */
    height: 100%;
    padding-left: 3rem;
  }
}

<!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">
  <title>Protfolio</title>
  <link rel="">
</head>

<body>
  <nav>
    <div class="nav-logo">
      <!-- <div class="nav-logo"> -->
      Redacted

    </div>


    <div class="nav-links">
      <ul>
        <li>
          <a href="">
            <span>.whoAmI()</span>
            <span class="fas fa-user-circle fa-2x" aria-hidden="true">
                    </span>
          </a>
        </li>
        <li>
          <a href="">
            <span>.Contact()</span>
            <span class="fa fa-address-card fa-2x" aria-hidden="true"></span>
          </a>
        </li>
        <li>
          <a href="">
            <span>.Blog()</span>
            <span class="fa fa-bookmark fa-2x" aria-hidden="true"></span>
          </a>
        </li>
        <li>
          <a href="">
            <span>.Projects()</span>
            <span class="fa fa-code fa-2x" aria-hidden="true" style="font-weight: bolder;"></span>
          </a>
        </li>
        <!-- <li>
                  <a href="">
                    <span>Tools</span>
                    <span>Tools</span>
                  </a>
                </li> -->
      </ul>
    </div>
  </nav>
  <div class="intro-container">

    <h2>function Greetings()</h2>
    <h2>{</h2>
    <p><i>var Greeting = "Hello There!!"<br>
                      var name_ = "Redacted"<br>
                      var name_alias = "<font color="mediumblue;">Redacted</font>"<br>
                      var Profession = "Redacted"
                    </i>
    </p>
    <h2>}</h2>
  </div>



  <script src="https://unpkg.com/scrollreveal"></script>
</body>

</html>

当设备宽度低于 500px 时，我一直在尝试将 red-div 部分的宽度设置为 30% ，将teal-div 部分的宽度设置为 70% 。但它似乎对我不起作用，因为即使设备宽度小于 500 像素，宽度仍分为 50% 蓝绿色和 50% 红色。

感谢您的时间和努力。

【问题讨论】：

不要使用宽度，而是尝试使用 flex-basis，分别为 flex-basis: 30% 和 flex-basis: 70%
代码对我有用。我无法重现您使用提供的代码描述的错误。

标签： html css responsive-design media-queries

【解决方案1】：

结合flex-box 定义宽度并不是一个好习惯。问题在于它与 flex box 管理空间的能力相冲突。

相反，您应该使用flex-basis 或flex（flex-grow、flex-shrink、flex-basis）简写来定义大小。

所以在你的情况下使用

.nav-logo {
  font-weight: bold;
  align-items: center;
  padding-left: 1rem;
  display: flex;
  flex-basis: 50%;
  /* height: 100%; don't add a height flex containers already fill height */
  font-family: 'Rock Salt', cursive;
}

.nav-links {
  /* display: inline-flex; -- this has no function as its a flex element */
  width: 50%;
  padding-left: 3rem;
}

/* try to only specify changes in media queries instead of replicating values */
@media all and (max-width:500px) {
  nav {
    position: fixed;
    /* display: flex; -- already defined */
    /* height: 4rem;  -- already defined */
    background-color: red;
    font-size: .6rem;
  }
  .nav-logo {
    /* font-weight: bold;  -- already defined */
    /* align-items: center;  -- already defined */
    /* padding-left: 1rem;  -- already defined */
    /* display: flex;  -- already defined */
    flex-basis: 30%;
    /* font-family: 'Rock Salt', cursive; */
    background-color: yellow;
    /* padding-left: 1rem;  -- already defined in this block and above */
  }
  .nav-links {
    flex-basis: 70%;
    background-color: teal;
  }
}

如果您在调整 flexbox 大小方面需要更多帮助 this is a good resource。

【讨论】：