主题
代码示例与演示
在本节中,我们将展示如何通过具体的代码示例和演示来实现 Web 自适应设计的各项技术。通过这些示例,您将能够理解如何将这些技术应用到实际项目中。
示例 1:响应式导航栏
这是一个简单的响应式导航栏,在桌面和移动设备上有不同的显示方式。使用了 Flexbox 和媒体查询来优化布局。
HTML
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
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
javascript
document.getElementById("hamburger").addEventListener("click", function () {
document.querySelector(".navbar").classList.toggle("active");
});
演示
- 在桌面设备上,导航菜单显示为一行横向布局。
- 在移动设备上,菜单会折叠为一个可点击的汉堡菜单,点击后显示完整的菜单。
示例 2:自适应图片
在这个例子中,我们将展示如何使用自适应图片来优化加载性能,确保图片在不同设备和屏幕尺寸下都能适当显示。
HTML
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
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
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
html
<video class="lazy-video" data-src="video.mp4" controls>
Your browser does not support the video tag.
</video>
JavaScript
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 项目中实现自适应设计的关键技术,并优化性能。