本文档详细介绍了一个使用HTML5和CSS3实现的响应式布局示例。该示例展示了如何在不同设备上（手机、平板、电脑）实现自适应布局，并使用了懒加载技术来优化图片加载。
文件结构
index.html- 主HTML文件，包含页面结构和内容。style.css- 样式表文件，定义了页面的样式和响应式布局。images/- 图片文件夹，包含页面中使用的图片。
HTML结构
index.html 文件定义了一个包含多个卡片的页面布局。每个卡片包含一张图片、一个标题和一段描述。图片使用了懒加载技术，只有在图片进入视口时才会加载。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<section class="card-container">
<div class="card">
<img class="lazy" data-src="./images/1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="风景摄影">
<h2>日落海滩</h2>
<p>金色的阳光洒在海面上，波光粼粼，远处的帆船静静地点缀着这幅自然的画卷。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="城市建筑">
<h2>现代都市</h2>
<p>高耸入云的摩天大楼，展现着城市的繁华与现代感，霓虹灯光为夜晚增添了独特魅力。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="美食展示">
<h2>美味佳肴</h2>
<p>精心烹饪的美食，不仅是味觉的享受，更是视觉的盛宴，每一道菜品都充满创意。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/4.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="自然风光">
<h2>山川秀色</h2>
<p>巍峨的群山连绵起伏，云雾缭绕其间，展现出大自然的磅礴气势与神秘美感。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/5.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="艺术设计">
<h2>创意空间</h2>
<p>独特的设计理念与艺术表现形式相结合，打造出令人耳目一新的视觉体验。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/6.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="科技产品">
<h2>科技未来</h2>
<p>先进的科技产品展示着人类智慧的结晶，引领我们走向更加智能化的生活方式。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/7.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="运动瞬间">
<h2>活力运动</h2>
<p>激情四射的运动场景，捕捉运动员们挑战极限的精彩瞬间，展现人类的无限潜能。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/8.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="文化艺术">
<h2>传统文化</h2>
<p>悠久的文化传统与现代艺术的碰撞，创造出独特的文化艺术风格。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/9.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="旅行探索">
<h2>探索之旅</h2>
<p>走遍世界各地，探索不同的文化与风景，每一次旅行都是一次难忘的经历。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/10.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="时尚潮流">
<h2>时尚魅力</h2>
<p>紧跟潮流的时尚元素，展现个性与品味，诠释现代人的生活方式。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/11.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="自然生态">
<h2>生态环境</h2>
<p>关注环境保护，记录大自然的美丽与脆弱，呼吁人们共同维护地球家园。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/12.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="创新科技">
<h2>创新未来</h2>
<p>展望未来科技发展，探索创新带来的无限可能，描绘美好的未来蓝图。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/1.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="花园景观">
<h2>花园漫步</h2>
<p>五彩缤纷的花园中，蝴蝶翩翩起舞，空气中弥漫着淡淡的花香，构成一幅生机勃勃的画面。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/2.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="咖啡文化">
<h2>咖啡时光</h2>
<p>香浓的咖啡在杯中氤氲，每一口都带来不同的味觉体验，让人沉醉在这份悠闲时光里。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/3.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="音乐艺术">
<h2>音乐盛宴</h2>
<p>悠扬的旋律在空中流淌，乐器的和声交织成一曲动人心弦的乐章，带来听觉的极致享受。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/4.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="工业设计">
<h2>工业美学</h2>
<p>简洁的线条与精密的结构相结合，展现现代工业设计的独特魅力，诠释科技与艺术的完美融合。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/5.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="瑜伽健身">
<h2>瑜伽修心</h2>
<p>优雅的体式配合呼吸的节奏，在宁静中找寻身心的平衡，体验生命的律动与和谐。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/6.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="街头艺术">
<h2>街头艺术</h2>
<p>充满创意的涂鸦与装置艺术，为城市街道注入活力与个性，展现都市文化的另一面。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/7.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="极限运动">
<h2>极限挑战</h2>
<p>突破自我的极限运动，每一个动作都充满力量与美感，展现人类对自由的追求。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/8.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="手工艺术">
<h2>匠心工艺</h2>
<p>传统手工艺的精湛技艺，每一件作品都凝聚着匠人的心血，传承着文化的精髓。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/9.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="夜景摄影">
<h2>城市夜景</h2>
<p>璀璨的灯光点亮夜空，勾勒出城市的轮廓，让夜晚的街道充满梦幻与浪漫。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/10.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="宠物生活">
<h2>萌宠日常</h2>
<p>可爱的宠物带来欢乐与温暖，记录它们生活中的每个精彩瞬间，分享人宠之间的温情。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/11.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="园艺设计">
<h2>绿意空间</h2>
<p>精心设计的园艺景观，将自然之美融入生活空间，创造出独特的绿色氛围。</p>
</div>
<div class="card">
<img class="lazy" data-src="./images/12.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="创意摄影">
<h2>创意视角</h2>
<p>用独特的视角捕捉生活中的细节，通过创意的表现手法，展现平凡中的不平凡。</p>
</div>
</section>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImage.classList.add("loaded");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImage.classList.add("loaded");
});
}
});
</script>
</body>
</html>
分析
<meta name="viewport">：确保页面在移动设备上正确缩放。<link rel="stylesheet">：引入外部样式表。<div class="container">：包裹整个内容区域，确保内容居中并限制最大宽度。<section class="card-container">：使用CSS Grid布局卡片。<img class="lazy">：使用懒加载技术，初始时加载一个占位符图片，当图片进入视口时再加载实际图片。
CSS样式
style.css 文件定义了页面的基础样式和响应式布局。通过媒体查询，页面在不同设备上会显示不同的布局。
/* 基础重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 基础样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
min-width: 375px;
}
/* 容器样式 */
.container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
max-width: 1440px;
min-width: 375px;
}
/* 卡片容器样式 */
.card-container {
display: grid;
gap: 20px;
padding: 20px 0;
width: 100%;
}
/* 卡片基础样式 */
.card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* 卡片图片样式 */
.card img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 16px;
opacity: 1;
transform: scale(1);
transition: all 0.5s ease;
}
.card img.lazy {
opacity: 0;
background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
background-size: 200% 100%;
animation: shimmer 1.5s linear infinite;
}
.card img.loaded {
opacity: 1;
transform: scale(1);
}
/* 卡片文字样式 */
.card h2 {
font-size: 1.4rem;
color: #2c3e50;
margin-bottom: 12px;
}
.card p {
color: #666;
font-size: 1rem;
line-height: 1.5;
}
/* 加载动画 */
@keyframes shimmer {
to {
background-position: -200% 0;
}
}
/* 手机端样式 (宽度 <= 768px) */
@media screen and (max-width: 768px) {
.container {
padding: 0 15px;
}
.card-container {
grid-template-columns: 1fr;
gap: 16px;
}
.card {
width: calc(100vw - 30px); /* 屏幕宽度 - 两边内边距 */
min-width: 280px;
padding: 12px;
}
.card img {
height: 180px;
}
.card h2 {
font-size: 1.2rem;
margin-bottom: 8px;
}
.card p {
font-size: 0.9rem;
}
}
/* 平板端样式 (768px < 宽度 <= 1280px) */
@media screen and (min-width: 769px) and (max-width: 1280px) {
.container {
padding: 0 20px;
}
.card-container {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.card {
width: calc((100vw - 64px) / 2); /* (屏幕宽度 - 两边内边距 - 中间间距) / 2 */
min-width: 280px;
padding: 16px;
}
.card img {
height: 220px;
}
.card h2 {
font-size: 1.5rem;
}
.card p {
font-size: 1.1rem;
}
}
/* 电脑端样式 (宽度 > 1280px) */
@media screen and (min-width: 1281px) {
.container {
padding: 0 30px;
}
.card-container {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.card {
width: calc((min(100vw, 1440px) - 90px) / 3); /* (屏幕宽度或最大宽度 - 两边内边距 - 两个间距) / 3 */
min-width: 280px;
padding: 20px;
}
.card img {
height: 240px;
}
.card h2 {
font-size: 1.6rem;
margin-bottom: 16px;
}
.card p {
font-size: 1.2rem;
line-height: 1.6;
}
}
/* 超小屏幕处理 (宽度 < 375px) */
@media screen and (max-width: 374px) {
body {
overflow-x: auto;
}
.container {
min-width: 375px;
width: 375px;
}
.card {
width: calc(375px - 30px);
}
}
分析
- 基础重置：重置所有元素的
margin和padding，并设置box-sizing为border-box，以便更轻松地控制布局。 - 基础样式：设置全局字体、行高、颜色和背景颜色。
- 容器样式：
.container类确保内容居中，并限制最大宽度为1440px。 - 卡片容器样式：使用CSS Grid布局卡片，设置间距和内边距。
- 卡片样式：设置卡片的背景颜色、圆角、阴影和悬停效果。
- 图片样式：设置图片的宽度、高度、圆角和过渡效果。使用
object-fit: cover确保图片填充容器。 - 懒加载样式：为懒加载图片设置占位符背景和加载动画。
- 媒体查询：根据设备宽度调整布局和样式，确保在不同设备上都能提供良好的用户体验。
响应式布局
通过CSS的媒体查询，页面在不同设备上会显示不同的布局：
- 手机端：单列布局，卡片宽度为屏幕宽度减去内边距。
- 平板端：双列布局，卡片宽度为屏幕宽度减去内边距和间距的一半。
- 电脑端：三列布局，卡片宽度为屏幕宽度减去内边距和间距的三分之一。
懒加载技术
页面中的图片使用了懒加载技术，只有在图片进入视口时才会加载。这通过IntersectionObserver API实现，如果浏览器不支持该API，则直接加载所有图片。
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImage.classList.add("loaded");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImage.classList.add("loaded");
});
}
});
分析
IntersectionObserver：用于检测图片是否进入视口，如果进入视口则加载图片。- 兼容性处理：如果浏览器不支持
IntersectionObserver，则直接加载所有图片。
总结
该示例展示了如何使用HTML5和CSS3实现一个响应式布局的H5页面，并通过懒加载技术优化图片加载。通过媒体查询，页面在不同设备上都能提供良好的用户体验。细致展开分析有助于理解如何在实际项目中实现类似的布局和优化技术。
扫一扫
4141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
