《手机网站建设》实验报告
| 实验名称 | 手机网站建设 | 实验日期 | 2025年10月27日 |
|---|---|---|---|
| 学生姓名 | [你的姓名] | 学 号 | [你的学号] |
| 专业班级 | [你的专业班级] | 指导教师 | [你的老师姓名] |
实验目的
- 掌握响应式网页设计：理解并实践使用媒体查询、弹性布局和流式布局等技术，确保网站在不同尺寸的移动设备上都能获得良好的浏览体验。
- 熟悉移动端开发规范：学习移动端特有的设计规范，如视口设置、触摸目标尺寸、字体大小适配等。
- 熟练运用前端开发技术：综合运用 HTML5、CSS3（特别是 Flexbox 和 Grid）以及 JavaScript (或 jQuery) 完成一个手机网站的静态页面搭建与交互实现。
- 掌握移动端性能优化技巧：了解并实践图片优化、代码压缩、减少HTTP请求等提升移动网站加载速度和用户体验的方法。
- 完成一个完整的手机网站项目：从需求分析、设计、编码到测试，独立完成一个功能完整、界面美观、交互流畅的手机网站。
实验环境
- 硬件环境：个人计算机 (CPU: Intel i5, 内存: 16GB, 硬盘: 512GB SSD)
- 操作系统：Windows 11 / macOS Ventura
- 开发工具：
- 代码编辑器：Visual Studio Code
- 浏览器：Google Chrome (用于开发者工具调试)
- 浏览器：移动设备模拟器 (Chrome DevTools Device Mode)
- 版本控制：Git / GitHub (可选)
- 技术栈：
- HTML5：用于构建网页结构。
- CSS3：用于样式设计，重点使用媒体查询、Flexbox 布局。
- JavaScript：用于实现页面交互效果。
- jQuery (可选)：简化 JavaScript 操作。
- Bootstrap (可选)：快速构建响应式布局。
实验内容与要求
- 网站主题：设计并开发一个“个人作品集”手机网站，用于展示个人项目、技能和联系方式。
- 页面要求：至少包含以下三个核心页面：
- 首页：展示欢迎语、个人简介、核心技能标签以及最新项目预览。
- 项目展示页：以卡片列表形式展示个人项目，每个项目包含标题、描述、技术栈和项目截图/链接。
- 关于我/联系方式页：包含个人详细介绍、工作经历或教育背景，以及清晰的联系方式（如邮箱、社交媒体链接）。
- 响应式要求：网站必须能够在不同尺寸的移动设备（如 iPhone 13, Samsung Galaxy S22, iPad 等）上自适应布局，内容不重叠，导航清晰。
- 交互要求：
- 实现一个顶部或底部的固定导航栏,方便在页面间跳转。
- 首页的项目预览卡片可以点击,跳转到项目详情（或模态框）。
- 实现平滑滚动、按钮悬停效果等微交互。
- 性能要求：图片资源需进行压缩，确保页面加载迅速。
实验原理
-
响应式设计核心原理：
（图片来源网络，侵删）- 流式网格：使用百分比而非固定像素来定义布局元素的宽度，使页面能够根据视口宽度灵活伸缩。
- 弹性图片和媒体：通过
max-width: 100%确保图片和视频等媒体元素不会溢出其容器。 - 媒体查询：这是响应式设计的灵魂，通过
@media规则，可以针对不同的视口宽度（如max-width: 768px）应用不同的 CSS 样式，从而实现针对不同设备的定制化布局和样式。
-
移动端适配关键点：
- 视口：在
<head>中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">告诉浏览器如何控制页面的尺寸和缩放，这是移动端适配的前提。 - 触摸友好：按钮和链接等可点击元素的尺寸应不小于 48x48 像素，并有足够的间距，方便用户触摸。
- 字体大小：使用
rem或em单位，而不是px，以便用户可以通过浏览器设置调整字体大小，推荐基础字体大小不小于 16px。
- 视口：在
-
布局技术：
- Flexbox (弹性盒布局)：一维布局模型，非常适合在移动端构建导航栏、卡片列表等，能够轻松实现元素的对齐、分布和排序。
- CSS Grid (网格布局)：二维布局模型，可以同时处理行和列，适合构建更复杂的页面结构。
实验步骤
-
需求分析与设计：
- 确定网站主题为“个人作品集”。
- 使用 Figma 或 Sketch 设计了三个页面的线框图和视觉稿，明确了颜色方案（主色调：#007BFF）、字体和组件样式。
-
项目初始化：
（图片来源网络，侵删）- 创建项目文件夹
mobile-portfolio。 - 在 VS Code 中打开项目，并创建
index.html,projects.html,about.html三个 HTML 文件。 - 创建
css文件夹，并新建style.css文件用于存放所有样式。 - 创建
js文件夹，并新建main.js文件用于存放脚本。 - 创建
images文件夹，用于存放网站图片资源。
- 创建项目文件夹
-
HTML 结构搭建：
- 在每个 HTML 文件中编写基础的 HTML5 结构。
- 引入
style.css和main.js文件。 - 在
<head>中添加viewportmeta 标签。 - 编写统一的页头（包含网站 Logo 和导航菜单）和页脚。
-
CSS 样式与响应式实现：
- 在
style.css中编写全局样式，包括重置默认样式、定义颜色变量等。 - 使用 Flexbox 实现导航栏和页脚的布局。
- 编写移动端（默认样式，
min-width: 320px）的页面布局，使内容在小屏幕上清晰展示。 - 使用媒体查询
@media (min-width: 768px)针对平板等较大屏幕进行调整，增加内容区域的宽度、改变导航菜单为水平排列等。
- 在
-
JavaScript 交互实现：
- 在
main.js中编写脚本，实现移动端导航菜单的“汉堡包”按钮点击展开/收起功能。 - 为项目卡片添加点击事件,实现跳转或弹出详情效果。
- 在
-
内容填充与优化：
（图片来源网络，侵删）- 将个人简介、项目信息等内容填充到 HTML 结构中。
- 使用在线工具（如 TinyPNG）压缩所有图片，并使用
<picture>标签或srcset属性为不同分辨率的设备提供合适的图片，以优化加载性能。
-
测试与调试：
- 在 Chrome 浏览器中使用开发者工具的设备模拟器，测试不同设备（iPhone, Android, iPad）下的显示效果。
- 检查布局是否错乱、链接是否有效、交互是否正常。
- 使用 Lighthouse 工具对网站性能进行审计，并根据建议进行优化。
实验结果与分析
最终成果展示
- 首页：展示了个人简介和技能标签，下方是最新项目的卡片式预览，导航栏为汉堡包菜单，点击后可展开。
- 项目展示页：以垂直列表形式展示了所有项目，每个项目卡片信息完整，点击可查看详情。
- 关于我页：详细介绍了个人经历和联系方式，社交媒体图标清晰可点击。
关键代码片段
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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo">My Portfolio</div>
<button class="nav-toggle" id="navToggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="nav-menu">
<a href="index.html">首页</a>
<a href="projects.html">项目</a>
<a href="about.html">关于我</a>
</nav>
</header>
<!-- 页面内容 -->
<main>
<!-- ... -->
</main>
<script src="js/main.js"></script>
</body>
</html>
CSS (style.css) - 响应式导航和媒体查询
/* 全局样式和变量 */
:root {
--primary-color: #007BFF;
--text-color: #333;
}
/* 默认移动端样式 */
.nav-menu {
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 70%;
background-color: white;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
flex-direction: column;
justify-content: center;
align-items: center;
transition: right 0.3s ease-in-out;
z-index: 1000;
}
.nav-menu.active {
right: 0;
}
/* 平板及以上设备样式 */
@media (min-width: 768px) {
.nav-toggle {
display: none; /* 隐藏汉堡包按钮 */
}
.nav-menu {
position: static; /* 恢复为正常文档流 */
right: auto;
height: auto;
width: auto;
background-color: transparent;
flex-direction: row; /* 改为水平排列 */
box-shadow: none;
}
.nav-menu a {
margin: 0 15px;
}
}
JavaScript (main.js) - 导航菜单交互
const navToggle = document.getElementById('navToggle');
const navMenu = document.querySelector('.nav-menu');
navToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
// 点击菜单项后自动关闭菜单
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
});
});
});
结果分析
- 响应式效果：通过媒体查询，网站在手机上显示为单列布局，导航为汉堡包菜单；在平板上则变为多列布局，导航变为水平菜单，布局切换流畅，符合预期。
- 用户体验：触摸目标尺寸适中，按钮间距合理，页面加载速度快（Lighthouse 评分 >90），交互反馈及时（如菜单滑入滑出效果），整体用户体验良好。
- 遇到的问题与解决：
- 问题1：在部分安卓手机上，导航栏遮挡了部分内容。
解决：通过给
body添加padding-top，其值等于导航栏的高度，确保内容始终在导航栏下方。 - 问题2：项目图片在不同手机上变形。
解决：为图片容器设置
aspect-ratio属性，并设置object-fit: cover，保证图片按比例填充且不变形。
- 问题1：在部分安卓手机上，导航栏遮挡了部分内容。
解决：通过给
实验总结与心得
通过本次实验,我系统地学习并实践了手机网站建设的完整流程，我深刻理解了响应式设计的核心思想，并熟练掌握了媒体查询、Flexbox 等关键技术，从最初的构思设计，到编码实现，再到最后的测试优化，每一个环节都让我对前端开发有了更深的认识。
我最大的收获是明白了“移动优先”（Mobile-First）的设计理念，先为最小的屏幕设计，再逐步增强，这种方法不仅逻辑清晰，而且能确保所有用户，尤其是移动用户，都能获得最核心的体验，我也认识到性能优化对于移动端网站至关重要，一个加载缓慢的网站会极大地损害用户体验。
这次实验不仅提升了我的技术能力,也锻炼了我的项目管理和解决问题的能力，在未来的学习中，我将继续深入探索更高级的前端技术，如 Vue.js 或 React，并学习如何使用构建工具（如 Webpack）来更高效地管理项目。
指导教师审阅意见：
签名： 日期：
