第一部分：核心理念 - 移动优先
在开始编码之前,最重要的一点是理解 “移动优先” (Mobile-First) 的设计理念。
- 传统桌面优先：先为桌面浏览器设计一个完整的网站，然后通过媒体查询来“缩减”功能，使其在手机上显示，这会导致手机网站加载大量不必要的桌面资源，影响性能。
- 移动优先：先为手机屏幕设计最核心、最精简的版本，随着屏幕尺寸的增大（平板、桌面），通过媒体查询来“增强”样式和功能，添加更复杂的布局和交互。
好处：
- 性能更优：手机用户只加载他们需要的资源，页面加载速度快。
- 设计更专注：先解决核心内容和功能，避免在手机上堆砌不必要的元素。
- 代码更简洁：CSS 中的默认样式就是手机样式，需要增强时才添加额外代码。
第二部分：HTML5 的关键特性
HTML5 引入了许多语义化标签和新功能，非常适合移动端开发。
语义化标签
这些标签让页面结构更清晰,不仅对开发者友好，对搜索引擎和屏幕阅读器（无障碍访问）也极其重要。
<header>：页面或区域的头部，通常包含 logo、导航链接。<nav>：导航链接的容器。<main>：页面的主要内容，一个页面中只应有一个<main>。<article>：独立的文章内容，如博客、新闻。<section>：文档中的一个区段，通常带有标题。<aside>：侧边栏或与主要内容相关但独立的内容（如广告、相关链接）。<footer>：页面或区域的底部，通常包含版权信息、联系方式。
示例结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的手机网站</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>网站 Logo</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">lt;/a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>欢迎</h2>
<p>这是欢迎语...</p>
</section>
<article>
<h2>文章标题</h2>
<p>这是文章内容...</p>
</article>
</main>
<footer>
<p>© 2025 我的网站</p>
</footer>
</body>
</html>
<meta> 视口标签
这是 移动端开发中最重要的标签，没有之一！它告诉浏览器如何控制页面的尺寸和缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：告诉浏览器，页面的宽度应该等于设备的屏幕宽度。initial-scale=1.0：设置页面的初始缩放比例为 1.0，即不缩放。
缺少这个标签，手机浏览器会默认将桌面版网页缩小显示，导致页面字体极小，需要用户手动放大才能阅读。
新的输入类型
为移动设备提供了更友好的输入界面,如调出数字键盘、日期选择器等。
type="tel"：电话号码输入框，调出数字键盘。type="email"：邮箱输入框，调出 和 键。type="number"：数字输入框。type="date"/type="time"：日期/时间选择器。
示例：
<form>
<label for="phone">手机号码：</label>
<input type="tel" id="phone" placeholder="请输入您的手机号">
<label for="birthday">生日：</label>
<input type="date" id="birthday">
</form>
第三部分：CSS3 的关键特性
CSS3 提供了强大的工具来创建美观、灵活且高性能的移动界面。
媒体查询 - 响应式的核心
媒体查询是实现“移动优先”和响应式布局的关键，它允许你根据设备特性（如宽度、高度、分辨率）应用不同的 CSS 样式。
语法：
/* 默认样式：手机端 */
body {
font-size: 16px;
padding: 10px;
}
/* 当屏幕宽度大于等于 600px 时 (平板) */
@media (min-width: 600px) {
body {
font-size: 18px;
padding: 20px;
}
.container {
display: flex;
}
}
/* 当屏幕宽度大于等于 1024px 时 (桌面) */
@media (min-width: 1024px) {
body {
max-width: 1200px;
margin: 0 auto;
font-size: 20px;
}
}
弹性盒子布局
Flexbox 是一维布局模型，非常适合创建导航栏、卡片列表、居中元素等，它在移动端布局中非常强大。
核心概念：
- 容器：
display: flex;的元素。 - 项目：容器内的直接子元素。
常用属性：
justify-content：主轴对齐方式（如space-between用于导航栏）。align-items：交叉轴对齐方式（如center用于垂直居中）。flex-direction：主轴方向（row水平,column垂直，移动端常用column）。
示例：水平导航栏
nav ul {
display: flex; /* 启用 Flexbox */
list-style: none;
padding: 0;
justify-content: space-around; /* 项目平均分布 */
background-color: #333;
}
nav ul li a {
color: white;
text-decoration: none;
padding: 15px;
display: block; /* 让 a 填满整个 li 的空间，方便点击 */
}
网格布局
Grid 是二维布局模型，非常适合复杂的页面布局，如整个页面的结构划分。
示例：简单的页面布局
.container {
display: grid;
/* 定义三列：侧边栏1fr，主内容区3fr，侧边栏1fr */
grid-template-columns: 1fr 3fr 1fr;
gap: 20px; /* 网格间距 */
}
@media (max-width: 768px) {
.container {
/* 在小屏幕上，变成单列布局 */
grid-template-columns: 1fr;
}
}
过渡与动画
使用 transition 和 @keyframes 可以创建流畅的交互效果，提升用户体验，而无需依赖 JavaScript。
示例：按钮悬停效果
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.2s ease; /* 定义过渡属性 */
}
.button:hover {
background-color: #0056b3;
transform: scale(1.05); /* 轻微放大 */
}
变量
CSS 变量（自定义属性）可以让你方便地管理颜色、字体等主题，提高代码的可维护性。
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
}
body {
color: var(--text-color);
}
h1 {
color: var(--primary-color);
}
第四部分：完整实例 - 一个简单的手机网站
我们将结合以上所有知识,创建一个单页面的手机网站。
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="style.css">
<!-- 引入一个移动端友好的图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.
