响应式导航

Question

我试图让我的导航响应，我不知道如何，它想要它，所以它不会跳到下一行，我知道填充导致这一点，我可以帮助这个使用百分比作为宽度，但看起来很丑陋。

这是页面的外观正常解析： http://imgur.com/a/YO7xh

这是它的外观，当我放大。（这是什么，我不希望发生的事情）： http://imgur.com/a/a3Siu

我能做些什么来防止这种情况发生？

代码导航：

.header-side .game { 
 
    float: right; 
 
} 
 

 
.header-side .selected { 
 
    color: #f7c22c; 
 
} 
 

 
.header-side .other { 
 
    float: left; 
 
} 
 

 
.bottom-header { 
 
    height: 115px; 
 
    border-bottom: 1px solid #343538; 
 
    display: flex; 
 
    color: #787878; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
} 
 

 
.top-header { 
 
    height: 45px; 
 
    border-bottom: 1px solid #343538; 
 
    width: 100%; 
 
} 
 

 
.header-side { 
 
    width: 45%; 
 
    height: 100%; 
 
} 
 

 
.header-middle { 
 
    width: 10%; 
 
    margin: auto; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.header-divider { 
 
    height: 60px; 
 
    text-align: center; 
 
    transform: rotate(45deg); 
 
    width: 60px; 
 
    margin: auto; 
 
    border: 1px solid #f7c22c; 
 
}

<header> 
 
    <div class="top-header"> 
 
    This is the top header! 
 
    </div> 
 
    <div class="bottom-header"> 
 
    <div class="header-side"> 
 
     <div class="nav-item game">skin upgrade</div> 
 
     <div class="nav-item game">skin royale</div> 
 
     <div class="nav-item game selected">skin crash</div> 
 
    </div> 
 
    <div class="header-middle"> 
 
     <div class="header-divider"> 
 
     </div> 
 
    </div> 
 
    <div class="header-side"> 
 
     <div class="nav-item other">deposit</div> 
 
     <div class="nav-item other">withdraw</div> 
 
     <div class="nav-item other">provably fair</div> 
 
    </div> 
 
    </div> 
 
</header>

Answer 1

尝试使用媒体的CSS查询这样的：

@media screen and (max-width: 768px) { 
    element {padding: 0;} 
} 

所以，当分辨率进入768px，它会删除元素的填充。

Answer 2

那么，你可以使用https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 或者你可以用百分比去。毕竟桌面网页在420p屏幕上看起来不会更好。 我会建议去更多的“低分辨率”，如移动设计，所以使用媒体查询可能是最好的，你可以做。编辑：https://www.w3schools.com/css/css_rwd_mediaqueries.asp 这是你想要的。