调整 window 大小时如何防止我的导航栏和页脚损坏？

Question

我目前正在构建一些测试页面来练习 HTML/CSS 并遇到了这个问题。当我调整浏览器 window 大小时，它破坏了导航栏和页脚。被困了两天试图解决这个问题，所以任何帮助将不胜感激。

My navbar should be like this

But when I resize it, it becomes this

还有我的页脚

should be like this

But it is like this after resizing

position: relative;
  left: 10px;
  top: 14px;
}

#nav-bar {
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: #4a7585;
  position: fixed;
  z-index: 1;
}

nav ul {
  margin: 0px;
  height: 30px;
}

nav li { 
  margin-right: 100px;
  display: inline-block;
  float: right;
  position: relative;
  bottom: 30px;
}

footer {
background-color: #629eb3;
margin-top: 20px;
padding: 5px;
width: 42%;
position: relative;
left: 28.6%;
top: 25px;
}

footer ul {
  list-style-type: none;
  display: flex;
}

footer li {
padding: 0 10px;
  display: flex;
  position: relative;
  left: 50%;
}

footer span {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  margin-top: 10px;

}

.footer-links {
  font-size: 15px;
  color: black;
}

    <nav id="nav-bar">
    <img id="header-img" src="https://i.imgur.com/AU8WZR6.png" alt="The Pen Store logo" width="180" height="60"> 
      <ul>
        <li><a href="#pricing" class="nav-link"> Pricing </a></li>      
        <li><a href="#how-it-works" class="nav-link"> How it Works </a></li>
        <li><a href="#features" class="nav-link"> Features </a></li>      
      </ul>

    </nav>

      <footer>
    <ul>
      <li><a href=# class="footer-links">Privacy</a></li>
      <li><a href=# class="footer-links">Terms</a></li>
      <li><a href=# class="footer-links">Work for The Pen Store</a></li>
    </ul>
      <span>The Pen Store 2022 © - All rights reserved</span>
  </footer>

Answer 1

尝试使用@media。查看一些示例或如何使用它。它将设置一些断点并应用另一种类型的 css。例如，当页面的宽度为 phone 时，它会应用一些 css，但如果宽度大于 phone，则应用另一个 css。或者使用 Bootstrap.

调整 window 大小时如何防止我的导航栏和页脚损坏？

How do I prevent my navbar and footbar from breaking when resizing the window?

html

css

resize

window