移动端 H5 开发过程中收藏的优质资源链接，涵盖布局、动画、设备 API 等各个方面。
布局相关
CSS3 动画
| 示例 | 说明 |
|---|---|
| Transform 变形 | CSS3 Transform 详解 |
| Transition 转换 | CSS3 Transition 详解 |
| Animation 动画 | CSS3 Animation 详解 |
| 简单 CSS3 动画 | 入门动画示例 |
| 带点击交互的动画 | 交互动画示例 |
设备 API
媒体相关
| 示例 | 说明 |
|---|---|
| Audio 事件支持检测 | Audio API 兼容性检测 |
| 摄像头捕捉 | getUserMedia 摄像头调用 |
| 用户声音录制 | 麦克风录音功能 |
| Web Speech | 语音识别 API |
| Web Audio API | Web Audio 音频处理 |
传感器相关
| 示例 | 说明 |
|---|---|
| 地理定位 | Geolocation API 使用 |
| 陀螺仪 | DeviceOrientation 事件 |
| 运动传感器 | DeviceMotion 事件 |
| 设备震动 | Vibration API |
| 电池状态 | Battery API |
| 环境光 | Ambient Light API |
| 网络信息 | Network Information API |
精品案例
| 示例 | 说明 |
|---|---|
| 驯龙公主 | 3D 交互案例 |
| 跑就有型 | 跑步主题互动 |
| 帧动画-互娱周末 | 帧动画应用 |
| Three.js 完整实例 | 3D 场景示例 |
| CreateJS 动画 | Canvas 动画方案 |
工具与框架
常用框架
// Zepto - 轻量级 jQuery 替代品
// <script src="zepto.min.js"></script>
// Hammer.js - 手势库
// <script src="hammer.min.js"></script>
// Swiper - 轮播滑动组件
// <script src="swiper.min.js"></script>
// Animate.css - 动画库
// <link href="animate.min.css">
// Three.js - 3D 渲染
// <script src="three.min.js"></script>
移动端调试
// VConsole - 移动端调试面板
// <script src="vconsole.min.js"></script>
new VConsole();
// Eruda - 另一个移动端调试工具
// <script src="eruda.min.js"></script>
eruda.init();
移动端适配方案
1. viewport 视口设置
<meta name="viewport"
content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
2. Rem 适配方案
// 根据 dpr 和屏幕宽度动态设置 font-size
function setRem() {
const dpr = window.devicePixelRatio || 1;
const width = document.documentElement.clientWidth;
const fontSize = width / 10; // 设计稿 750px 时，1rem = 75px
document.documentElement.style.fontSize = fontSize + 'px';
}
setRem();
window.addEventListener('resize', setRem);
3. 一像素边框
/* 使用 transform 实现物理像素边框 */
.border-1px {
position: relative;
}
.border-1px::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: #ddd;
transform: scaleY(0.5);
}
性能优化建议
减少重排重绘
/* 避免 */ element.style.width = '100px'; element.style.height = '100px'; /* 使用 transform */ element.style.transform = 'translate(100px, 100px)';使用 CSS 动画
/* 开启 GPU 加速 */ .animate { transform: translateZ(0); will-change: transform; }图片优化
- 使用 WebP 格式
- 根据 dpr 提供 @2x @3x 图片
- 使用懒加载
参考资源
- Can I Use - 特性兼容性查询
- MDN Web Docs - Web API 文档
- 腾讯 TGideas - 移动端开发规范
这些资源帮助我更好地理解了移动端 H5 开发的各个方面，希望对您也有帮助。