01
跨平台适配概述
什么是跨平台、为什么需要跨平台、主流方案对比 (React Native / Flutter / uni-app)
概念对比
02
Flexbox弹性布局基础
主轴与交叉轴、flex-direction、justify-content、align-items、flex-wrap
Flexbox基础
03
Flexbox实战
骰子布局、圣杯布局、导航栏布局、卡片列表布局
实战布局
04
Grid网格布局基础
grid-template-columns、grid-template-rows、grid-gap、grid-area
Grid基础
05
Grid实战
响应式相册、仪表盘布局、表单布局、杂志风格布局
Grid响应式
06
响应式设计核心
媒体查询、断点设置、移动优先 vs 桌面优先、视口单位
响应式媒体查询
07
流式布局与百分比
百分比宽度、max-width/min-width、自适应字体、图片自适应
流式百分比
08
多列布局
column-count、column-gap、column-rule、瀑布流布局实现
多列瀑布流
09
定位与层叠
position属性详解、z-index、粘性定位sticky、固定页脚
定位z-index
10
CSS单位详解
px、em、rem、vw/vh、%、calc()、ch/ex
单位CSS
11
移动端适配方案
viewport设置、rem适配、vw/vh适配、1px问题
移动端适配
12
跨平台字体适配
系统字体栈、Web安全字体、@font-face、字体图标
字体图标
13
图片适配与优化
srcset、sizes、picture元素、WebP格式、懒加载
图片优化
14
触摸事件与手势
touch事件、click延迟、滑动、缩放、长按
触摸手势
15
跨平台表单设计
输入框适配、选择器、日期选择、文件上传
表单跨平台
16
暗黑模式适配
prefers-color-scheme、CSS变量切换、图片适配
暗黑模式主题
17
屏幕方向适配
orientation媒体查询、横竖屏布局切换、锁定方向
方向横竖屏
18
刘海屏与安全区域
safe-area-inset-*、env()函数、notch适配
刘海屏安全区域
19
跨平台动画
CSS过渡与动画、requestAnimationFrame、Lottie动画
动画Lottie
20
性能优化
重排与重绘、will-change、contain、虚拟列表
性能优化
21
无障碍适配
ARIA标签、焦点管理、语义化HTML、屏幕阅读器
无障碍a11y
22
国际化布局
dir属性、逻辑属性、文本方向、日期格式
国际化i18n
23
跨平台调试
Chrome DevTools模拟、真机调试、远程调试、错误监控
调试工具
24
组件化布局
BEM命名、CSS Modules、Styled Components、Tailwind CSS
组件化CSS
25
状态栏与导航栏
沉浸式状态栏、导航栏高度适配、底部导航栏
状态栏导航
26
弹窗与浮层
Modal、Toast、ActionSheet、Popover跨平台实现
弹窗浮层
27
列表与滚动
FlatList、RecyclerView、下拉刷新、无限滚动
列表滚动
28
跨平台路由与导航
栈导航、Tab导航、抽屉导航、深度链接
路由导航
29
数据可视化适配
ECharts、D3.js、Canvas、SVG响应式
可视化图表
30
综合实战
从设计稿到多端适配完整流程、项目结构、发布与维护
实战全流程