HTML5 敲击乐(2)：从静态页面到移动端适配的完整实践

在上一篇《用 HTML5 打造"敲击乐"钢琴》中，我们成功实现了键盘触发音效的核心功能。但一个真正专业的网页应用，不仅要"能用"，更要"好用"。

今天，我们将深入优化这个项目，重点解决：

浏览器默认样式带来的布局混乱
移动端设备尺寸不一致的适配问题
静态页面向交互式 Web 应用的演进

这不是简单的代码补充，而是一次前端工程化思维的实战演练。

一、为什么需要 CSS Reset？告别浏览器"个性"

不同浏览器对 HTML 元素（如 body、h3、ul）有各自的默认样式。例如：

Chrome 给 body 默认 margin
Safari 给 h1~h6 不同的 font-size
Firefox 给 ul 添加 list-style

如果不统一，你的页面在不同浏览器中可能"错位"、"换行"甚至"变形"。

解决方案：CSS Reset

我们采用业界广泛使用的 Eric Meyer's Reset CSS：

css 复制代码

/* 清除所有元素的默认 margin/padding/border */
html, body, div, span, h1, h2, /* ... */ {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* 确保 HTML5 新标签正确显示 */
article, aside, section, nav, footer {
  display: block;
}

/* 统一盒模型 */
*, *::before, *::after {
  box-sizing: border-box;
}

box-sizing: border-box 是关键！

它让 width 包含 padding 和 border，避免计算失误导致布局错乱。

二、移动端适配：用 `vh` 和 `rem` 打造全屏体验

昨天的琴键在手机上可能太小或溢出屏幕。我们需要让 UI 自适应不同设备。

1. 视口单位 `vh`：让高度与屏幕同步

css 复制代码

html, body {
  height: 100%; /* 必须设置 */
}

.keys {
  min-height: 100vh; /* 至少占满整个视口高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

1vh = 视口高度的 1%，100vh 就是全屏高度。

无论手机是 6寸还是 7寸，.keys 容器始终居中且撑满屏幕。

2. 相对单位 `rem`：字体与布局的弹性控制

css 复制代码

html {
  font-size: 10px; /* 设置根字体大小 */
}

.key {
  width: 10rem;        /* 10 × 10px = 100px */
  font-size: 1.5em;    /* 相对于父元素 */
  padding: 1rem 0.5rem;/* 10px / 5px */
}

.key h3 {
  font-size: 4rem;     /* 40px */
}

优势：

修改 html { font-size } 即可全局调整 UI 大小
比 px 更灵活，适应不同分辨率

3. 背景图适配：`background-size` 的智慧选择

我们的背景图 background.jpg 在不同设备上如何完美显示？

css 复制代码

html {
  background: url(../music/background.jpg) bottom center no-repeat;
  background-size: cover; /* 关键！ */
}

属性	效果
`cover`	图片拉伸填充整个容器，可能裁剪，适合背景装饰
`contain`	图片等比缩放，完整显示，可能留白，适合 Logo

对于音乐应用，cover 能营造沉浸感，是更优选择。

三、弹性布局（Flexbox）：现代前端的"布局魔法"

昨天我们用 display: flex 让琴键排成一行，今天深入理解它的核心能力。

完整 Flex 布局代码：

css 复制代码

.keys {
  display: flex;
  justify-content: center; /* 主轴居中（水平） */
  align-items: center;     /* 交叉轴居中（垂直） */
  gap: 1rem;               /* 间距，替代 margin */
}

.key {
  /* 块级元素默认独占一行，flex 让它们在同一行 */
  border-radius: 0.5rem;
  text-align: center;
}

Flex 核心概念：

主轴（main axis） ：justify-content 控制
交叉轴（cross axis） ：align-items 控制
gap：元素间间距，无需再写 margin

Flex 布局是响应式设计的基石，简单几行代码，搞定复杂对齐。

四、HTML 结构优化：模块化与性能

1. 资源引入的最佳位置

html 复制代码

<head>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <!-- 页面结构 -->
  <script src="./script.js"></script>
</body>

CSS 放 <head> ：尽早下载，避免"无样式内容闪烁"（FOUC）
JS 放 </body> 前：防止阻塞 HTML 解析

⚠️ JS 如果放在 <head>，会阻塞 DOM 构建，导致页面加载变慢。

2. 选择器的性能与语义化

css 复制代码

/* 推荐：类选择器，性能高，语义清晰 */
.key { }
.key h3 { }
.key .sound { }

/* 避免：* 通配符，性能差 */
* { margin: 0; padding: 0; }

虽然 * 写起来方便，但在大型项目中会影响渲染性能。精准选择器 + CSS Reset 是更专业的做法。

五、图片与链接的健壮性处理

1. 图片响应式

css 复制代码

img {
  max-width: 100%;  /* 防止溢出容器 */
  height: auto;     /* 保持宽高比 */
  display: block;   /* 消除底部空白 */
}

2. 链接去样式

css 复制代码

a {
  text-decoration: none; /* 去下划线 */
  color: inherit;        /* 继承父元素颜色 */
}

这些细节让 UI 更干净、专业。

六、`.playing` 动画的优化与扩展

昨天我们实现了琴键按下动画，今天可以进一步增强：

css 复制代码

.key {
  transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateY(0);
}

.playing {
  transform: translateY(5px); /* 向下"按下" */
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

cubic-bezier：自定义缓动函数，让动画更"弹跳"
translateY：模拟物理按压效果

七、从"静态页面"到"Web 应用"的跃迁

阶段	特征	技术要点
静态页面	HTML + CSS	结构与样式分离
交互页面	+ JavaScript	用户行为响应
Web 应用	+ 工程化	响应式、性能、可维护性

我们的"敲击乐"已具备 Web 应用的基本特征：

跨设备适配（vh/rem）
专业样式重置（CSS Reset）
高效布局（Flexbox）
模块化结构（HTML/CSS/JS 分离）

最后来面试题：为什么 `<script>` 放最后，`<link>` 放 `<head>`？

面试题还原：

"在 HTML 中，为什么通常把 CSS 放在 <head>，而 JS 放在 </body> 前？这样做有什么好处？"

标准回答：

这是为了优化页面加载性能，确保用户能尽快看到内容，并避免渲染阻塞。

1. CSS 放 `<head>` 的原因：

尽早下载样式 ：浏览器解析 HTML 时，一旦遇到 <link rel="stylesheet">，就会立即发起请求下载 CSS 文件。
防止"无样式内容闪烁"（FOUC）：如果 CSS 加载太晚，用户会先看到原始的、未样式的 HTML 结构（一片混乱的文字），等 CSS 下载完才突然变好看。这体验极差。
构建渲染树（Render Tree）的前提 ：浏览器必须等 DOM Tree + CSSOM Tree 都准备好，才能合成渲染树并绘制页面。因此，越早获取 CSS，越早完成渲染。

总结：CSS 虽然会阻塞渲染，但我们希望它尽早阻塞，以便尽快完成页面绘制。

2. JS 放 `</body>` 前的原因：

JavaScript 具有阻塞特性，这是关键！

阻塞 DOM 解析 ：当浏览器解析 HTML 时，一旦遇到 <script src="...">，就会暂停 HTML 解析，转而去下载并执行 JS 文件。
- 如果 JS 文件很大或网络慢，HTML 解析就会长时间停滞，页面看起来"卡住"了。
- 用户看到的是白屏或部分空白内容，体验很差。
JS 可能依赖 DOM ：大多数 JS 代码需要操作 DOM（如 document.querySelector）。如果 JS 放在 <head>，此时 DOM 还没生成，JS 执行会失败。

html 复制代码

<head>
  <script src="script.js"></script> <!-- ❌ 错误：此时 DOM 还没生成 -->
</head>
<body>
  <div class="key">A</div>
</body>

而放在 </body> 前，DOM 已经完全构建完毕，JS 可以安全操作：

html 复制代码

<body>
  <div class="key">A</div>
  <script src="script.js"></script> <!-- ✅ 正确：DOM 已就绪 -->
</body>

总结：JS 会阻塞 HTML 解析，所以要让它在 DOM 构建完成后才执行，既保证功能正确，又减少白屏时间。

补充：现代优化手段

虽然"JS 放底部"是经典做法，但现代前端还有更高级的方案：

方法	作用
`<script async>`	异步下载，下载完立即执行，不保证顺序
`<script defer>`	异步下载，延迟到 DOM 解析完成后执行，推荐用于模块化 JS
动态导入 `import()`	按需加载，实现代码分割

但对于简单项目或初学者，"CSS 在 head，JS 在 body 底部" 依然是最稳妥、最易理解的最佳实践。

My Think

"我理解这是为了优化关键渲染路径 （Critical Rendering Path）。CSS 要尽早加载以避免 FOUC，而 JS 因其阻塞性，应放在 DOM 之后，或使用 defer/async 进一步优化。这体现了我对用户体验和性能的关注。"

HTML5 敲击乐(2)：从静态页面到移动端适配的完整实践

一、为什么需要 CSS Reset？告别浏览器"个性"

解决方案：CSS Reset

二、移动端适配：用 vh 和 rem 打造全屏体验

1. 视口单位 vh：让高度与屏幕同步

2. 相对单位 rem：字体与布局的弹性控制

3. 背景图适配：background-size 的智慧选择

三、弹性布局（Flexbox）：现代前端的"布局魔法"

完整 Flex 布局代码：

Flex 核心概念：

四、HTML 结构优化：模块化与性能

1. 资源引入的最佳位置

2. 选择器的性能与语义化

五、图片与链接的健壮性处理

1. 图片响应式

2. 链接去样式

六、.playing 动画的优化与扩展

七、从"静态页面"到"Web 应用"的跃迁

最后来面试题：为什么 <script> 放最后，<link> 放 <head>？

面试题还原：

标准回答：

1. CSS 放 <head> 的原因：

2. JS 放 </body> 前的原因：

补充：现代优化手段

My Think

二、移动端适配：用 `vh` 和 `rem` 打造全屏体验

1. 视口单位 `vh`：让高度与屏幕同步

2. 相对单位 `rem`：字体与布局的弹性控制

3. 背景图适配：`background-size` 的智慧选择

六、`.playing` 动画的优化与扩展

最后来面试题：为什么 `<script>` 放最后，`<link>` 放 `<head>`？

1. CSS 放 `<head>` 的原因：

2. JS 放 `</body>` 前的原因：