HTML5 导航栏随屏幕大小变化

HTML5 导航栏是网页设计中常用的元素之一。随着移动设备的普及，不同尺寸的屏幕对导航栏的显示提出了更高的要求。为了适应不同屏幕尺寸的需求，我们可以使用一些技术手段来实现导航栏的自适应。

在本文中，我们将介绍如何使用 HTML5 和 CSS3 来创建一个自适应的导航栏，并通过 JavaScript 来实现动态调整导航栏的样式。

HTML 结构

首先，让我们来定义导航栏的 HTML 结构。我们将使用 ul 和 li 元素来创建一个水平导航栏，每个 li 元素代表一个导航链接。

<nav>
  <ul>
    <li><a rel="nofollow" href="#">首页</a></li>
    <li><a rel="nofollow" href="#">关于我们</a></li>
    <li><a rel="nofollow" href="#">产品</a></li>
    <li><a rel="nofollow" href="#">联系我们</a></li>
  </ul>
</nav>

CSS 样式

接下来，我们需要为导航栏添加一些样式。我们将使用 CSS3 中的 Flexbox 布局来实现导航栏的自适应。

nav {
  background-color: #f2f2f2;
}

ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  margin: 0 10px;
}

a {
  color: #333;
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  nav {
    flex-direction: column;
  }

  li {
    margin-bottom: 10px;
  }
}

在上面的代码中，我们定义了导航栏的背景色、链接的颜色和样式等。在屏幕宽度小于 600 像素时，我们将导航栏的方向改为垂直布局，并调整每个导航链接的间距。

JavaScript 动态调整样式

为了实现导航栏的随屏幕大小变化而改变样式，我们可以使用 JavaScript 来动态调整样式。

window.addEventListener("resize", function() {
  var nav = document.querySelector("nav");
  var screenWidth = window.innerWidth;

  if (screenWidth < 600) {
    nav.classList.add("vertical");
  } else {
    nav.classList.remove("vertical");
  }
});

在上面的代码中，我们监听窗口大小变化的事件，当窗口宽度小于 600 像素时，我们为导航栏添加一个名为 vertical 的类，该类将改变导航栏的样式。

实现效果

现在我们已经定义了导航栏的 HTML 结构、CSS 样式和 JavaScript 代码，让我们来看一下最终的实现效果。

erDiagram
  nav ||--o{ ul
  ul ||--o{ li
  li ||--o{ a

以上就是实现导航栏随屏幕大小变化的全部内容。通过 HTML5 和 CSS3，我们可以轻松地创建一个自适应的导航栏，并通过 JavaScript 动态调整样式，以适应不同尺寸的屏幕。希望本文对你有所帮助！