我正在尝试设计一个网站,并希望它能够做出响应。 但是我不想使用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>
如果您能帮助我将其变成更好的导航栏,我将不胜感激。
答案 0 :(得分:2)
您可以使用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>
答案 1 :(得分:1)
因此,一个好主意是将常规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
编辑:
我还有一个小费。尝试避免使用#
进行样式设置。改用.
类:)
答案 2 :(得分:1)
如果您要进行响应式网页设计,则最好查看一些媒体查询:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
祝一切顺利。
答案 3 :(得分:0)
这是正常的流体行为。如果要使其具有“更多”的响应速度,则可以考虑将断点与@media一起使用,并为移动设备寻找一些保存分辨率。
答案 4 :(得分:0)
如果您不想使用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%};
}
答案 5 :(得分:0)
通常,您使用@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
}
答案 6 :(得分:-1)
您可以使用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;
}
}