Question

我正在尝试设计一个网站，并希望它能够做出响应。但是我不想使用Bootstrap，因为它需要加载很多时间。我的导航栏工作正常（稍后我将更改颜色和所有内容）。但是，当我将其缩放到移动大小时，导航栏上的按钮会滑到其他按钮下面。

body {
  background: transparent linear-gradient(180deg, #000000 0%, #545454 100%) 0% 0% no-repeat padding-box;
}

#backtohome {
  font-family: 'Bangers', cursive;
  text-align: left;
  font-size: 60px;
  background: transparent;
  color: white
}

#home {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 30px;
  background: transparent;
  color: white
}

#discord {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 30px;
  background: transparent;
  color: white
}

#shop {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 30px;
  background: transparent;
  color: white
}

<nav>
  <button id="backtohome" href="home.html">QsAGaming</button>
  <button id="home" href="home.html">Home</button>
  <button id="discord" href="home.html">Discord</button>
  <button id="shop" href="home.html">Shop</button>
</nav>
<div class="footer">
  <p id="footertext">©2020, QsA</p>
</div>

如果您能帮助我将其变成更好的导航栏，我将不胜感激。

Answer 1

您可以使用CSS的媒体查询来制作一个简单的响应系统。

<style>

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

[class*="col-"] {
  float: left;
  padding: 15px;
}


[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>

<div class="row">
  <div class="col-3 col-s-3 menu">
  </div>
  <div class="col-6 col-s-9">
  </div>
  <div class="col-3 col-s-12">
  </div>
</div>

Answer 2

因此，一个好主意是将常规nav隐藏在移动设备屏幕宽度上，然后将其替换为隐藏在汉堡包按钮下方的移动导航。

了解media queries。这真的很方便：）

看看我在码本上找到的这些示例。

https://codepen.io/ijaed/pen/ggmMqj

https://codepen.io/abdosteif/pen/bRoyMb?editors=1100

正在使用的媒体查询：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

编辑：我还有一个小费。尝试避免使用#进行样式设置。改用.类：）

Answer 3

如果您要进行响应式网页设计，则最好查看一些媒体查询：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

祝一切顺利。

Answer 4

这是正常的流体行为。如果要使其具有“更多”的响应速度，则可以考虑将断点与@media一起使用，并为移动设备寻找一些保存分辨率。

Answer 5

如果您不想使用Bootstrap，可以使用一种叫做

的东西

媒体查询 https://www.w3schools.com/css/css3_mediaqueries_ex.asp

当您使用响应式设计时，我建议您以移动优先的方式进行。

/* css for mobile */


/*css for laptop */

@media only screen and (min-width:1024px){}
 /*css for desktop*/

@media only screen and (min-width:1370px){}

启动CSS以获取移动屏幕尺寸的导航栏，然后只需在笔记本电脑的媒体查询中进行一些更改即可。

例如：

/*css for mobile*/
button{ width:100%;}

/*css for laptop*/ 
@media only screen and (min-width:1024px){
 button{width:50%};
}

/*css for desktop*/
 @media only screen and (min-width:1370px){
  button{width:25%};
 }

Answer 6

通常，您使用@media屏幕Look here制作导航栏

如果只希望文本具有响应性，则可以使用

大众属性

通过在文本中添加例如5vw而不是60px来确定窗口大小，因此您的CSS应该如下所示：

 body {
  background: transparent linear-gradient(180deg, #000000 0%, #545454 100%) 0% 0% no- repeat padding-box;

}

#backtohome {
  font-family: 'Bangers', cursive;
  text-align: left;
  font-size: 5vw;
  background: transparent;
  color: white;

}

#home {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 4vw;
  background: transparent;
  color: white
}

#discord {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 4vw;
  background: transparent;
  color: white
}

#shop {
  font-family: 'Bangers', cursive;
  margin-left: 2%;
  font-size: 4vw;
  background: transparent;
  color: white
}

Answer 7

您可以使用em代替绝对值px。尝试使用此CSS代码并查看其结果

 body {
background: transparent linear-gradient(180deg, #000000 0%, #545454 100%) 0% 0% no-repeat padding-box;
 font-size: 10px;
}


#backtohome {
font-family: 'Bangers', cursive;
text-align: left;
font-size: 6em;
background: transparent;
color: white
}

#home {
font-family: 'Bangers', cursive;
margin-left: 2%;
font-size: 3em;
background: transparent;
color: white
}

#discord {
font-family: 'Bangers', cursive;
margin-left: 2%;
font-size: 3em;
background: transparent;
color: white
}

#shop {
font-family: 'Bangers', cursive;
margin-left: 2%;
font-size: 3em;
background: transparent;
color: white
}

@media only screen and (max-width: 567px){
  body {
    font-size: 5px;
  }
}

我应该如何使此Navbar更具响应性？

7 个答案: