HTML5是Web瀏覽器的最新版本，允許我們使用更多的標記和功能來構建現代的網站和應用程序。其中一個最有用的功能是自適應導航欄，它可以根據用戶的設備動態地調整大小和樣式。
<nav class="navigation"> <ul class="nav-list"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Services</a></li> <li class="nav-item"><a href="#">Blog</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Sign Up</a></li> </ul> </nav>
上面的代碼是一個基本的HTML5導航欄。我們使用
接下來，我們可以添加一些CSS來樣式化導航欄：
.navigation {
background-color: #333;
overflow: hidden;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-item a:hover {
background-color: #ddd;
color: #333;
}我們使用CSS樣式為導航欄添加了背景顏色、取消了列表項的默認樣式、浮動了列表項，以及為鏈接添加了顏色、內邊距和文本居中。
現在，當我們在不同的設備上查看網站時，導航欄將根據可用空間自動調整大小和排列：
/* Small screens */
@media only screen and (max-width: 600px) {
.nav-item {
width: 100%;
float: none;
}
.nav-item a {
padding: 10px;
}
}
/* Medium screens */
@media only screen and (min-width: 600px) and (max-width: 960px) {
.nav-list {
display: flex;
justify-content: space-between;
}
.nav-item {
width: 30%;
}
}
/* Large screens */
@media only screen and (min-width: 960px) {
.nav-list {
display: flex;
justify-content: flex-end;
}
.nav-item {
width: auto;
}
}我們使用CSS媒體查詢來定義不同設備寬度下的導航欄布局。對于小屏幕，我們將圖標項的寬度設置為100％以使其垂直排列，并減小了鏈接的內邊距。對于中等屏幕，我們使用Flexbox布局將鏈接水平排列。對于大屏幕，我們使用Flexbox布局并將鏈接放置到右側。
總之，HTML5自適應導航欄是創建流暢網站的一種可靠方式。使用HTML5的導航欄的代碼庫和媒體查詢，您可以輕松輕松地設計適應不同設備的導航欄。