基础 CSS 响应式导航

CSS 响应式导航是指根据屏幕尺寸适应不同的导航布局。在移动设备上，传统的导航栏会占用太多的屏幕空间，不利于用户体验，因此需要实现响应式导航来解决这个问题。

使用 HTML 创建导航

首先需要使用 HTML 创建导航，通常使用无序列表 ul 和列表项 li 创建导航。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

使用 CSS 样式导航

接下来需要使用 CSS 样式导航，为导航添加样式。以下是一个基本的导航样式：

nav {
  background-color: #333;
  height: 50px;
}

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

nav li {
  float: left;
  width: 25%;
  text-align: center;
}

nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  line-height: 50px;
}

nav li:hover {
  background-color: #555;
}

创建响应式导航

现在需要使导航在移动设备上能够响应。通常情况下，需要在移动设备上将导航转化为按钮形式。通过 CSS media query 可以实现在不同屏幕尺寸下应用不同的样式。

@media screen and (max-width: 600px) {
  nav ul {
    display: none;
  }
  
  nav button {
    display: block;
    background-color: #333;
    color: #fff;
    border: none;
    width: 100%;
    height: 50px;
  }
  
  nav button:hover {
    background-color: #555;
  }
}

这样，在屏幕宽度小于 600px 的情况下，导航将变成一个按钮，点击该按钮将显示下拉菜单，其中包含所有导航项。

代码总结

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button>&#9776;</button>
</nav>

nav {
  background-color: #333;
  height: 50px;
}

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

nav li {
  float: left;
  width: 25%;
  text-align: center;
}

nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  line-height: 50px;
}

nav li:hover {
  background-color: #555;
}

@media screen and (max-width: 600px) {
  nav ul {
    display: none;
  }
  
  nav button {
    display: block;
    background-color: #333;
    color: #fff;
    border: none;
    width: 100%;
    height: 50px;
  }
  
  nav button:hover {
    background-color: #555;
  }
}

通过以上的 HTML 与 CSS 代码的结合，实现了基础的响应式导航，用户在任何设备上都可以方便地浏览网站的内容。