CSS3 伸縮導(dǎo)航欄是一種能夠自適應(yīng)屏幕大小的網(wǎng)頁導(dǎo)航欄。通過使用CSS3的flex布局和媒體查詢等技術(shù)，使得導(dǎo)航欄在不同設(shè)備上的顯示效果更為友好，提升了網(wǎng)頁的用戶體驗(yàn)。

/* CSS代碼 */
.navbar{
display: flex;
/* 將子元素在主軸（水平方向）上平分父容器 */
justify-content: space-between;
/* 設(shè)置父容器沿交叉軸（垂直方向）水平居中 */
align-items: center;
/* 給導(dǎo)航欄設(shè)置寬度，讓其適應(yīng)頁面 */
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
/* 設(shè)置背景色和字體顏色 */
background-color: #333;
color: #fff;
}
.navbar__logo{
/* 設(shè)置logo圖片大小 */
width: 50px;
height: 50px;
}
.navbar__list{
/* 將子元素在主軸（水平方向）上平分父容器 */
display: flex;
justify-content: space-between;
/* 去除列表項(xiàng)的默認(rèn)樣式 */
list-style: none;
margin: 0;
padding: 0;
}
.navbar__item{
/* 設(shè)置每個(gè)列表項(xiàng)之間的間距 */
margin-right: 20px;
}
.navbar__link{
/* 設(shè)置鏈接文字樣式 */
color: #fff;
font-size: 16px;
text-decoration: none;
}
/* 媒體查詢 */
@media screen and (max-width: 600px) {
.navbar{
flex-direction: column;
padding: 20px;
}
.navbar__list{
/* 改變主軸方向，讓列表項(xiàng)豎直排列 */
flex-direction: column;
margin-top: 20px;
margin-bottom: 20px;
}
.navbar__item{
margin-right: 0;
margin-bottom: 10px;
}
}

在上述代碼中，通過定義.navbar為flex容器，使得其內(nèi)部的子元素.navbar__logo（logo圖片）、.navbar__list（導(dǎo)航鏈接列表）在水平方向上平分父容器，以此達(dá)到logo和導(dǎo)航鏈接水平排列的效果。通過設(shè)置媒體查詢來解決頁面縮小導(dǎo)致導(dǎo)航欄顯示不完全的問題，將導(dǎo)航欄變?yōu)樨Q直排列，更好地適應(yīng)不同的設(shè)備屏幕。總之，CSS3 伸縮導(dǎo)航欄使得網(wǎng)頁導(dǎo)航欄更加實(shí)用，可以幫助用戶更方便地瀏覽網(wǎng)站內(nèi)容。