要使導(dǎo)航欄在不同設(shè)備上自適應(yīng)寬度，可以使用CSS媒體查詢（Media Queries）來(lái)實(shí)現(xiàn)。以下是一個(gè)簡(jiǎn)單的示例：

1. 在HTML文件中創(chuàng)建一個(gè)導(dǎo)航欄元素，例如：

<nav>
  <ul>
    <li><a href="#">首頁(yè)</a></li>
    <li><a href="#">關(guān)于我們</a></li>
    <li><a href="#">聯(lián)系我們</a></li>
  </ul>
</nav>

1. 然后，在CSS文件中添加以下樣式，使用媒體查詢來(lái)根據(jù)不同的屏幕尺寸調(diào)整導(dǎo)航欄的寬度：

/* 默認(rèn)樣式 */
nav {
  width: 100%;
  background-color: #333;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

/* 小屏設(shè)備上的樣式 */
@media screen and (max-width: 600px) {
  nav {
    width: 100%;
    background-color: #333;
  }

  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  nav li {
    display: block;
    margin-bottom: 10px;
  }
}

在這個(gè)示例中，我們?yōu)樾∑猎O(shè)備（最大寬度為600px）設(shè)置了特定的樣式。當(dāng)屏幕寬度小于或等于600px時(shí)，導(dǎo)航欄將使用塊級(jí)布局，每個(gè)項(xiàng)目之間有10px的間距。當(dāng)屏幕寬度大于600px時(shí)，導(dǎo)航欄將使用內(nèi)聯(lián)布局，每個(gè)項(xiàng)目之間沒(méi)有間距。