響應式導航

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 這是你想要的。