移动端 H5 开发学习路线 | 26 年最新零基础到精通一条龙（万人收藏⭐️）
编程导航学习网站：学编程、做项目、拿 Offer！
企业高频面试题库：开始刷题，面试遇原题！
精选简历模板大全：1 分钟搞定简历！
AI 资源导航网站：获取最新 AI 黑科技！
1 对 1 模拟面试：随时随地提升面试能力
移动端 H5 开发求职高频面试题：开始刷题
开篇介绍
移动端 H5 开发是指使用 HTML5、CSS3、JavaScript 等前端技术开发 适配移动设备的 Web 应用。
H5 应用可以在移动浏览器中运行，也可以嵌入到 App 的 WebView 中，实现跨平台的移动应用开发。相比原生开发，H5 开发具有开发效率高、跨平台、更新方便等优势。
为什么要学移动端 H5 开发？
移动端 H5 是前端开发的必备技能，几乎所有前端工程师都需要掌握移动端适配。随着移动互联网的普及，越来越多的业务场景需要移动端 H5 应用。从微信小程序到 App 内的活动页面、从移动端官网到 H5 游戏，H5 应用无处不在。而且 H5 开发相比原生开发更简单、成本更低，很多业务场景都优先选择 H5 开发。
总之，掌握移动端 H5 开发，不仅能让你开发移动端 Web 应用，还能为 App 开发 H5 页面，拓展就业面。
移动端 H5 开发的核心挑战是 屏幕适配。移动设备的屏幕尺寸千差万别（从 iPhone SE 到 iPad Pro），如何让页面在不同设备上都能正常显示是 H5 开发的重点。常用的适配方案包括 rem、vw/vh、flex 布局、媒体查询等。此外，移动端的性能优化、触摸事件处理、移动端调试等也是 H5 开发的重要内容。
在 AI 时代，移动端 H5 可以集成 AI 能力，如语音识别、图像识别、智能推荐等，做出更多牛呗的应用。
学习前提
学习移动端 H5 开发建议先掌握：
- HTML/CSS 基础：熟练使用 HTML5、CSS3【必学】
- JavaScript 基础：熟练使用 ES6+ 语法【必学】
- 前端框架：React、Vue 等【建议】
关于前端开发的详细学习，可以查看 前端开发学习路线
学习路线图
就业方向
学好移动端 H5 开发后，能帮你提升下列岗位的求职竞争力：
- 前端工程师：开发 PC 端和移动端 Web 应用
- H5 开发工程师：专注于移动端 H5 开发
- 全栈工程师：前端 + 后端全栈开发
- 小程序开发工程师：开发微信小程序等
整体学习建议
1）先学前端基础：移动端 H5 开发是前端开发的一部分，一定要先掌握 HTML、CSS、JavaScript 基础，再学习移动端特性。
2）适配是核心：移动端适配是 H5 开发的核心问题，要重点学习各种适配方案（rem、vw/vh 等），理解其原理和适用场景。
3）移动端 H5 的学习一定要结合项目实践。建议多做一些移动端页面，体验不同设备上的显示效果。
4）移动端开发要在真机上调试，不要只在浏览器模拟器上测试。不同设备的表现可能不同。
5）学习移动端 H5 时可以用 AI 工具辅助开发。推荐使用 AI 资源大全 中的工具。
阶段 1：移动端基础（7-15 天，仅供参考）
学习目标
理解移动端 Web 开发的基本概念，掌握移动端特性。
知识点
移动端基础概念【必学】：
- 物理像素和逻辑像素
- 设备像素比（DPR）
- 视口（Viewport）
- 1px 问题
- 点击穿透问题
Viewport 配置【必学】：
- viewport meta 标签
- width、initial-scale、user-scalable 等属性
移动端调试【必学】：
- Chrome DevTools 模拟器
- 真机调试（vConsole、Eruda）
- 抓包工具（Charles、Fiddler）【建议学】
学习重点
1）viewport meta 标签是移动端开发的基础，一定要正确配置。常用的配置是 width=device-width, initial-scale=1.0, user-scalable=no。
2）移动端的 1px 问题是指在高 DPR 设备上，border: 1px 看起来很粗。可以使用 transform: scale(0.5) 或伪元素解决。
3）真机调试非常重要，建议使用 vConsole 或 Eruda 在真机上调试。这两个工具可以在移动端显示控制台，方便调试。
阶段 2：移动端适配（10-25 天，仅供参考）
移动端适配是解决不同设备屏幕尺寸和分辨率差异的关键，包括响应式布局、rem/vw 等适配方案。
学习目标
掌握移动端适配方案，能够开发适配各种设备的页面。
知识点
rem 适配方案【必学】：
- rem 单位的原理
- flexible.js
- rem 的计算方法
- rem + less/sass
vw/vh 适配方案【必学，推荐】：
- vw/vh 单位的原理
- vw/vh 的优势
- postcss-px-to-viewport 插件
- rem + vw 混合方案
flex 弹性布局【必学】：
- flex 容器和 flex 项
- justify-content、align-items
- flex-direction、flex-wrap
响应式布局【建议学】：
- 媒体查询（@media）
- 移动优先 vs 桌面优先
学习重点
1）rem 和 vw/vh 是移动端适配的两大主流方案。rem 需要用 JS 动态设置根元素字体大小，vw/vh 是纯 CSS 方案更简单。目前推荐使用 vw/vh 方案。
2）rem 的计算公式：1rem = 屏幕宽度 / 10。如果设计稿是 750px，那么 1rem = 75px。元素宽度 150px 在代码中写为 2rem。
3）vw 的计算公式：100vw = 屏幕宽度。如果设计稿是 750px，那么 1px = 0.1333vw。可以使用 postcss-px-to-viewport
