0
我的代碼真的很sl and，我真的不知道如何使用媒體查詢。我真的只是感覺我的方式，現在我有一個非常草率的無響應的導航欄。請幫我修復它。它崩潰在300px寬度和內部的元素都在400px怪異。我也很想知道編寫媒體查詢的更好方法。每當我想改變一些東西，我覺得我不得不增加一百萬個，儘管我可能不會。我的導航欄在300px寬度處摺疊。導航欄內的元素崩潰在400px
.nav {
width: 100%;
height: 5%;
border-bottom: 2px solid white;
background-color: #333333;
z-index: 98;
text-align: center;
position: fixed;
padding: 1% 0;
top: 0;
}
.nav ul li {
display: inline-block;
width: 20%;
list-style-type: none;
margin: 1% 0 0 0;
z-index: 99;
}
.nav ul li a {
text-decoration: none;
color: white;
padding: 5px 20px;
border: 2px solid #C6B99C;
transition: background .5s;
font-family: Times;
}
.nav ul li a:hover {
transition: background .5s;
background-color: #C6B99C;
}
.nav ul li a:active {
transition: background .5s;
background-color: #C6B99C;
}
#btn {
border-radius: 0;
border: 2px solid #95747F;
transition: background .5s;
}
#btn:hover {
background-color: #95747F;
transition: background .5s;
}
#btn:active {
background-color: #95747F;
transition: background .5s;
}
@media (max-width: 2560px) {
.nav ul li a {
font-size: 50px;
width: 20px;
}
.nav {
padding-bottom: 10px;
height: 15%;
}
}
@media (max-width: 1440px) {
.nav ul li a {
font-size: 20px;
width: 15px;
}
.main h1 {
font-size: 40px;
}
.nav {
height: 10%;
}
}
@media (max-width: 420px) {
.nav {
height: 5%;
}
.nav ul li {
font-size: 14px;
}
}
@media (max-width: 1440px) {
.nav ul li a {
font-size: 20px;
width: 15px;
}
.main h1 {
font-size: 40px;
}
.nav {
height: 5%;
}
}
@media(max-width: 1000px) {
.nav {
height: 10%;
}
}
@media(max-width: 2560px) {
.nav {
height: 10%;
}
}
@media(max-width: 420px) {
.nav {
height: 2%;
}
.nav ul li {
font-size: 14px;
}
}
@media(max-width: 688px) {
iframe {
width: 300px;
}
.nav ul li a {
padding: 5px 10px;
font-size: 15px;
margin: 10px 10px;
}
}<div class="nav">
<ul>
<li><a href="space-page-home.html">Home</a></li>
<li><a href="">About</a></li>
<li><a href="space-page-blog.html" id="btn">Blog</a></li>
<li><a href="space-page-pics.html">Space Pics</a></li>
</ul>
</div>
您是否嘗試過[answer]（https://stackoverflow.com/a/28659861/5588347）？ –
@AshishSrivastava與我一樣，我希望它逐漸變小，而不僅僅是以一定的寬度以不同的方式進行格式化。我應該在問題中澄清。對不起，我現在就修復這個問題 –