VIP20
本课程属于：035-OTA升级包制作 启动链与BSP系统构建 · 共 20 门相关课程，组合学习更完整。
查看所属VIP全部课程 →
← 返回所属目录 咨询 / 购买

设备端适配全流程实战

共计 30 章节
点击此处阅读海量试读课程：100+行业、1000+细分领域
01
适配基础概念
什么是设备适配 · 为什么需要适配 · 主流设备屏幕参数概览
适配基础概念什么是设备适配
02
视口与布局视口
物理像素 · 逻辑像素 · CSS像素
视口布局视口
03
媒体查询入门
媒体类型 · 媒体特性 · 逻辑操作符
媒体查询入门媒体类型
04
媒体查询进阶
移动优先与桌面优先策略 · 组合查询 · 常用断点库
媒体查询进阶移动优先
05
弹性布局（Flexbox）
主轴与交叉轴 · flex属性详解 · 常见布局模式
Flexbox弹性布局
06
网格布局（Grid）
网格容器与项目 · 轨道大小 · 网格区域
Grid网格布局
07
相对单位详解
em · rem · vw/vh
相对单位详解em
08
图片适配
响应式图片（srcset/sizes… · picture元素 · WebP格式
图片适配srcset/sizes
09
字体适配
系统字体栈 · @font-face · 可变字体
字体适配系统字体栈
10
触摸事件与手势
touch事件 · click延迟 · 300ms延迟解决方案
触摸事件手势
11
移动端1px问题
物理像素1px边框 · 解决方案（伪元素 · transform
px移动端1
12
安全区域适配
刘海屏/挖孔屏 · safe-area-inset-* · env()函数
安全区域适配刘海屏
13
横竖屏适配
orientation媒体查询 · 屏幕方向API · 强制横屏方案
横竖屏适配orientation
14
多端适配策略
一套代码多端运行 · 条件编译 · UA检测
多端适配策略一套代码多端运行
15
百分比布局与流式布局
百分比基准 · max-width/min-widt… · 内容优先
百分比布局流式布局
16
rem适配方案
rem原理 · 动态设置根字体大小 · lib-flexible
rem适配方案
17
vw/vh适配方案
vw原理 · 配合rem使用 · 纯vw布局
vw/vh适配方案
18
缩放适配方案
meta viewport缩放 · CSS transform缩放 · canvas适配
缩放适配方案meta
19
桌面端适配
大屏设计 · 响应式表格 · 多列布局
桌面端适配大屏设计
20
平板端适配
分屏模式 · 拖拽交互 · 悬浮窗
平板端适配分屏模式
21
可穿戴设备适配
圆形屏幕 · 小屏幕 · 交互简化
可穿戴设备适配圆形屏幕
22
TV端适配
遥控器导航 · 焦点管理 · 1080p/4K
TV端适配
23
打印适配
@media print · 分页控制 · 隐藏非打印元素
打印适配media
24
无障碍适配
ARIA标签 · 语义化HTML · 键盘导航
无障碍适配ARIA
25
性能优化与适配
关键渲染路径 · 资源预加载 · 代码分割
性能优化适配
26
测试与调试
Chrome DevTools设备模… · 远程调试 · 真机测试
测试调试
27
常见适配问题排查
样式覆盖 · 滚动穿透 · 键盘弹起
常见适配问题排查样式覆盖
28
框架适配方案
React/Vue响应式设计 · 组件库适配 · CSS-in-JS
框架适配方案React/Vue
29
跨平台方案对比
React Native · Flutter · uni-app
跨平台方案对比React
30
项目实战
从0到1搭建适配体系 · 适配文档规范 · CI/CD集成
项目实战从0到1搭建适配…