css 使用调整大小的窗口缩放导航栏

eqqqjvef 于 2023-01-27 发布在其他

关注(0)|答案(2)|浏览(215)

我正在尝试学习如何制作一个响应式导航栏，我已经成功地让导航栏根据显示器的分辨率来调整大小，但是按钮不能随之调整大小。
我试过使用%，vm和vh，但是我不相信这是正确的解决方案，或者我没有正确地实现它。
先谢了。

#topnav {
     width: 100vw;
     height:10vh;
     position: fixed;
     top: 0;
     right: 0;
     background-color: Black;
     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
     font-size: 20px;
     float: right;
     display: flex;
     justify-content: space-between;
    
}
 .nav-link-container {
     display: flex;
     align-content: center 
}
 #logo {
     width: 300px;
     background-color: black;
     font-weight: bold;
     color: green;
     float: left;
}
 .nav-link {
     display: block;
     padding: 1em;
     color: green;
     text-align: center;
     line-height: 60px;
     text-decoration: none;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Lochquarry Outdoor Centre</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <nav id="topnav">
      <a id="logo" class="nav-link" href="index.html">Lochquarry Outdoor Centre</a>
      <div class="nav-link-container">
        <a class="nav-link" href="#">News</a>
        <a class="nav-link" href="#">About</a>
        <a class="nav-link" href="#">Area info</a>
      </div>
    </nav>
      
    <div>
      <img class="mainpic" src="media/home_page_pic.jpg" width="800"/>
    </div>
      
  </body>
</html>

css

来源：https://stackoverflow.com/questions/75235900/making-my-navbar-scale-with-a-resized-window

2条答案

按热度按时间

ojsjcaue1#

试试这个：

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui';
}

.nav {
  height: 50px;
  width: 100%;
  background-color: black;
  position: relative;
}

.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav > .nav-btn {
  display: none;
}

.nav > .nav-links {
  display: inline;
  float: right;
  font-size: 18px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav > .nav-links > a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.nav > #nav-check {
  display: none;
}

@media (max-width:600px) {
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Lochquarry Outdoor Centre</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="nav">
      <input type="checkbox" id="nav-check">
      <div class="nav-header">
        <div class="nav-title">
          Lochquarry Outdoor Centre
        </div>
      </div>
      <div class="nav-btn">
        <label for="nav-check">
          <span></span>
          <span></span>
          <span></span>
        </label>
      </div>
      
      <div class="nav-links">
        <a href="#">News</a>
        <a href="#">About</a>
        <a href="#">Area info</a>
      </div>
    </div>      

  </body>
</html>

赞(0）回复(0）举报 2023-01-27

qc6wkl3g2#

你可以设置当你的按钮应该用@media (max-width: //your screen width here//){ }调整大小然后放font-size: //your size here//到调整你的按钮.与@media (max-width: //your screen width here//){ }你可以使用css在一定的条件下，说当你的监视器宽度是390像素宽（宽度的iphone14），然后这按钮有一个大小23像素/1.4雷姆
我希望我能帮助你

赞(0）回复(0）举报 2023-01-27

我来回答

css 使用调整大小的窗口缩放导航栏

2条答案

相关问题

热门标签

最新问答