代码示例与演示

在本节中，我们将展示如何通过具体的代码示例和演示来实现 Web 自适应设计的各项技术。通过这些示例，您将能够理解如何将这些技术应用到实际项目中。

示例 1：响应式导航栏

这是一个简单的响应式导航栏，在桌面和移动设备上有不同的显示方式。使用了 Flexbox 和媒体查询来优化布局。

HTML

<nav class="navbar">
  <div class="logo">MyWebsite</div>
  <ul class="menu">
    <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>
  <div class="hamburger" id="hamburger">☰</div>
</nav>

CSS

/* 基本样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px 20px;
}

.navbar .logo {
  color: white;
  font-size: 24px;
}

.navbar .menu {
  display: flex;
  list-style: none;
}

.navbar .menu li {
  margin: 0 15px;
}

.navbar .menu li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.navbar .hamburger {
  display: none;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* 媒体查询 - 移动设备 */
@media (max-width: 768px) {
  .navbar .menu {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .navbar .hamburger {
    display: block;
  }

  .navbar.active .menu {
    display: flex;
  }
}

JavaScript

document.getElementById("hamburger").addEventListener("click", function () {
  document.querySelector(".navbar").classList.toggle("active");
});

演示

• 在桌面设备上，导航菜单显示为一行横向布局。
• 在移动设备上，菜单会折叠为一个可点击的汉堡菜单，点击后显示完整的菜单。

示例 2：自适应图片

在这个例子中，我们将展示如何使用自适应图片来优化加载性能，确保图片在不同设备和屏幕尺寸下都能适当显示。

HTML

<img
  src="image-small.jpg"
  srcset="image-small.jpg 600w, image-medium.jpg 1200w, image-large.jpg 1800w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Responsive Image"
/>

解释

• srcset 属性用于定义不同分辨率的图片，浏览器会根据设备的屏幕分辨率选择合适的图片。
• sizes 属性用于定义图片的显示宽度。在小屏设备上，图片宽度占视窗的 100%；在中等屏幕上，占 50%；在大屏上，占 33%。

演示

• 在移动设备上，加载较小的图片，以减少数据传输和加载时间。
• 在大屏设备上，加载较大的图片，以确保图片质量不受影响。

示例 3：Flexbox 布局

使用 Flexbox 创建一个响应式卡片布局。卡片会根据屏幕大小自动调整其排列方式。

HTML

<div class="card-container">
  <div class="card">
    <h3>Card 1</h3>
    <p>This is card number 1.</p>
  </div>
  <div class="card">
    <h3>Card 2</h3>
    <p>This is card number 2.</p>
  </div>
  <div class="card">
    <h3>Card 3</h3>
    <p>This is card number 3.</p>
  </div>
  <div class="card">
    <h3>Card 4</h3>
    <p>This is card number 4.</p>
  </div>
</div>

CSS

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card {
  background-color: #f4f4f4;
  padding: 20px;
  margin: 10px;
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .card {
    width: 48%;
  }
}

@media (min-width: 1200px) {
  .card {
    width: 23%;
  }
}

解释

• 在小屏设备上，每个卡片占据 100% 的宽度。
• 在中等屏幕上，每个卡片占据 48% 的宽度，布局为两列。
• 在大屏设备上，每个卡片占据 23% 的宽度，布局为四列。

演示

• 屏幕宽度小于 768px 时，卡片以单列显示。
• 屏幕宽度在 768px 到 1200px 之间时，卡片以两列显示。
• 屏幕宽度大于 1200px 时，卡片以四列显示。

示例 4：懒加载视频

使用懒加载来优化视频内容的加载，只有在用户滚动到视频区域时，才会加载视频。

HTML

<video class="lazy-video" data-src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const videos = document.querySelectorAll(".lazy-video");

  const options = {
    rootMargin: "0px 0px 200px 0px",
    threshold: 0.1,
  };

  const observer = new IntersectionObserver(function (entries, observer) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const video = entry.target;
        video.src = video.getAttribute("data-src");
        observer.unobserve(video);
      }
    });
  }, options);

  videos.forEach((video) => {
    observer.observe(video);
  });
});

演示

• 视频只有在进入视窗时才会开始加载，减少了页面的初始加载时间。

通过这些代码示例，您可以学习如何在 Web 项目中实现自适应设计的关键技术，并优化性能。