01
跨平台适配概述
什么是跨平台、为什么需要适配、主流平台（iOS/Android/Web/桌面）的差异概览。
概念全景
02
屏幕尺寸与分辨率
物理像素与逻辑像素、DPR（设备像素比）、常见设备尺寸一览表。
像素DPR
03
视口（Viewport）机制
移动端视口概念、布局视口与视觉视口、meta viewport标签详解。
视口meta
04
响应式设计基础
媒体查询（Media Query）入门、断点（Breakpoint）策略、移动优先原则。
媒体查询断点
05
弹性布局（Flexbox）
Flex容器与项目属性、主轴与交叉轴、常见布局模式（居中/等分/圣杯）。
Flex布局
06
网格布局（Grid）
Grid容器与项目、网格线/轨道/区域、响应式网格实战。
Grid响应式
07
相对单位详解
em/rem/vw/vh/vmin/vmax、百分比与视口单位的取舍、实战中的单位选择。
单位vw/vh
08
图片适配方案
响应式图片（srcset/sizes）、picture元素、WebP与AVIF格式选择。
图片WebP
09
字体适配
系统字体栈、Web字体加载策略、字号与行高的相对化。
字体可读性
10
触摸事件适配
click延迟问题、touch事件与mouse事件、手势识别基础。
触摸事件
11
移动端1px边框问题
物理像素与CSS像素的冲突、解决方案（伪元素/transform/box-shadow）。
1px边框
12
安全区域适配
刘海屏/挖孔屏适配、safe-area-inset-*、env()函数。
刘海屏安全区
13
暗黑模式适配
prefers-color-scheme、CSS变量切换、图片与图标适配。
暗黑主题
14
横竖屏适配
orientation媒体查询、屏幕方向锁定、布局自适应。
横竖屏方向
15
国际化布局适配
LTR与RTL、逻辑属性（logical properties）、文本方向处理。
国际化RTL
16
跨平台字体图标
Icon Font vs SVG Sprite vs 组件库图标、可访问性考量。
图标SVG
17
表单控件适配
原生控件样式差异、自定义表单组件、键盘弹出与布局偏移。
表单键盘
18
滚动与回弹效果
-webkit-overflow-scrolling、平滑滚动、滚动容器边界处理。
滚动回弹
19
动画性能适配
硬件加速、will-change、transform与opacity优先、帧率监控。
动画性能
20
网络状态适配
离线缓存（Service Worker）、弱网降级、骨架屏与占位符。
离线弱网
21
跨平台框架对比
React Native vs Flutter vs uni-app vs Taro、选型建议。
框架对比
22
Flutter适配方案
MediaQuery、LayoutBuilder、自适应组件（LayoutBuilder/Expanded）。
Flutter自适应
23
React Native适配方案
Dimensions、PixelRatio、useWindowDimensions、平台特定代码。
RN平台
24
uni-app适配方案
条件编译、rpx单位、easycom组件、各端差异处理。
uni-apprpx
25
桌面端适配
窗口resize事件、大屏布局策略、键盘快捷键与右键菜单。
桌面大屏
26
平板适配
分屏模式、拖拽交互、手势与鼠标共存。
平板分屏
27
可访问性适配
WCAG标准、ARIA标签、焦点管理、屏幕阅读器支持。
无障碍ARIA
28
测试与调试
Chrome DevTools设备模拟、真机调试、云端测试平台（BrowserStack等）。
调试测试
29
性能监控与优化
Lighthouse指标、Core Web Vitals、首屏加载优化、图片懒加载。
性能Lighthouse
30
项目实战
从零搭建一套跨平台适配方案、目录结构设计、组件封装策略、持续迭代。
实战项目