📱 触屏·适配

01

移动端适配基础

视口概念 · 物理/逻辑像素 · DPR · 屏幕尺寸分类

→

02

视口设置与meta标签

viewport详解 · width=device-width · initial-scale · user-scalable

→

03

rem适配方案

rem原理 · 根字体设置 · 动态计算 · lib-flexible

→

04

vw/vh适配方案

vw/vh原理 · 与rem对比 · 纯CSS适配 · 兼容性处理

→

05

媒体查询与响应式

@media规则 · 断点策略 · 移动优先 · 常见断点值

→

06

Flex弹性布局

容器属性 · 项目属性 · 主轴/交叉轴 · 常见布局

→

07

Grid网格布局

grid容器/项目 · 网格轨道 · 网格区域 · 响应式设计

→

08

触屏事件基础

touchstart/move/end · TouchEvent · 触摸点坐标

→

09

手势识别原理

单指拖动 · 双指缩放 · 旋转角度 · 状态机设计

→

10

点击延迟与处理

300ms延迟 · fastclick原理 · touch模拟click

→

11

滑动与滚动优化

-webkit-overflow-scrolling · 惯性滚动 · 滚动穿透

→

12

图片适配与优化

srcset · picture · WebP · 图片懒加载

→

13

字体适配方案

系统字体栈 · 自定义字体 · 大小适配 · iconfont

→

14

移动端1px边框

物理像素边框 · 伪元素 · transform缩放 · border-image

→

15

安全区域适配

刘海屏/挖孔屏 · safe-area-inset · env() · viewport-fit

→

16

移动端表单设计

输入类型优化 · 键盘控制 · 自动聚焦 · 验证反馈

→

17

触屏反馈与动效

CSS过渡/动画 · 触摸反馈 · 微交互 · 性能优化

→

18

移动端调试工具

Chrome DevTools · 真机调试 · vConsole · Charles

→

19

跨平台适配策略

Hybrid App · WebView配置 · JSBridge · UA检测

→

20

移动端性能优化

渲染性能 · 内存管理 · 网络优化 · 首屏加载

→

21

触摸区域设计

Fitts定律 · 最小目标 · 区域扩展 · 防误触

→

22

手势库实战

Hammer.js · 手势配置 · 事件委托 · 自定义手势

→

23

拖拽与排序

拖拽实现 · 触摸拖拽 · 列表排序 · 拖拽反馈

→

24

轮播图组件

触摸滑动轮播 · 无限循环 · 指示器 · 自动播放

→

25

下拉刷新与上拉加载

实现原理 · 自定义动画 · 状态管理 · 三方库对比

→

26

侧滑菜单与抽屉

手势触发 · 遮罩层 · 动画曲线 · 边缘手势

→

27

长列表优化

虚拟列表原理 · 可视区域计算 · 回收复用 · 滚动同步

→

28

移动端地图交互

手势与地图联动 · 标记点触摸 · 缩放控制 · 性能

→

29

Canvas触屏绘图

触摸坐标映射 · 画笔实现 · 撤销重做 · 性能优化

→

30

综合实战项目

移动端H5活动页 · 适配选型 · 手势交互 · 性能调优

→