指尖之上 - 移动端H5开发资源汇总

Fri, 02 Feb 2018 00:00:00 +0000

移动端 H5 开发过程中收藏的优质资源链接，涵盖布局、动画、设备 API 等各个方面。

布局相关

示例	说明
滑屏页面布局	移动端常见滑屏布局实现
水平垂直居中	CSS 居中方案汇总
布局形式	常见布局形式示例
图片列表	图片列表布局
屏幕适应	多分辨率适配方案
Rem 自适应	Rem 布局详解
视频自适应	响应式视频方案

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 开发的各个方面，希望对您也有帮助。

CSS3 on Yison's Blog

指尖之上 - 移动端H5开发资源汇总

布局相关

CSS3 动画

设备 API

媒体相关

传感器相关

精品案例

工具与框架

常用框架

移动端调试

移动端适配方案

1. viewport 视口设置

2. Rem 适配方案

3. 一像素边框

性能优化建议

参考资源