📐 大屏自适应实战 30章 · 从入门到高阶

✨ 分辨率适配 · 弹性布局 · 案例驱动
01大屏自适应概述
  • 什么是大屏自适应
  • 为什么需要自适应
  • 常见自适应方案概览
02分辨率基础
  • 屏幕分辨率概念
  • 常见规格 (1080p/2K/4K/8K)
  • 像素密度PPI与视口
03CSS单位详解
  • px, em, rem, vw, vh
  • vmin, vmax 区别
  • 适用场景分析
04百分比布局
  • 流式布局实现
  • 百分比与父容器关系
  • 百分比局限性
05Flexbox弹性布局
  • 容器与项目属性
  • 主轴与交叉轴
  • 大屏实战应用
06Grid网格布局
  • 容器与项目属性
  • 网格轨道与区域
  • 仪表盘应用
07媒体查询基础
  • @media规则
  • 断点设置策略
  • 基于分辨率样式切换
08响应式设计模式
  • 桌面优先 vs 移动优先
  • 断点设计原则
  • 列降、mostly fluid
09rem适配方案
  • rem原理
  • 设置根字体大小
  • 配合媒体查询适配
10vw/vh适配方案
  • 视口单位原理
  • 纯vw布局
  • vw+rem混合方案
11缩放适配方案
  • CSS transform:scale()
  • 基于视口计算缩放
  • 全屏缩放适配
12大屏常用设计稿尺寸
  • 1920x1080 / 3840x2160
  • 设计稿与屏幕映射
  • 常见设计稿规范
13基于设计稿的适配计算
  • 尺寸转换公式
  • 动态计算适配比例
  • 实际案例
14JavaScript动态适配
  • JS获取屏幕尺寸
  • 动态设置根字体
  • resize防抖
15大屏字体适配
  • 字体随屏幕变化
  • clamp()函数
  • 最小最大字体限制
16大屏图片适配
  • 响应式图片 srcset/sizes
  • 背景图片适配
  • SVG优势
17大屏图表适配
  • ECharts/Highcharts容器自适应
  • 图表字体动态调整
  • 尺寸适配
18大屏地图适配
  • 地图容器自适应
  • 缩放级别与分辨率
  • GeoJSON数据适配
19大屏表格适配
  • 列宽自适应
  • 横向滚动与固定列
  • 大数据量渲染优化
20大屏视频适配
  • 视频容器自适应
  • 分辨率源切换
  • 播放器控件适配
21多屏拼接方案
  • 多屏拼接原理
  • 屏幕边框补偿
  • 跨屏对齐同步
22触摸屏与交互适配
  • 触摸/鼠标事件兼容
  • 大屏触摸手势
  • 点击区域大小
23性能优化
  • 渲染性能瓶颈
  • 减少重排重绘
  • requestAnimationFrame
24CSS变量与主题适配
  • 自定义属性动态主题
  • 基于分辨率主题切换
  • 实践
25容器查询 Container Queries
  • container-type / name
  • 基于容器尺寸适配
  • 应用场景
26大屏框架对比
  • DataV / Sugar / Superset
  • 自适应能力对比
  • 选型建议
27自适应测试与调试
  • Chrome DevTools 模拟
  • 分辨率测试策略
  • 常见问题排查
28案例实战一：企业数据监控大屏
  • 1920x1080 设计稿
  • 适配到 3840x2160
  • 完整流程
29案例实战二：智慧城市指挥中心
  • 多屏拼接+触摸交互
  • 分辨率适配
  • 综合实战
30总结与最佳实践
  • 自适应方案决策树
  • 常见坑点总结
  • 未来趋势 (CSS Houdini等)
📘 📩 专注资料整理 🎯 大屏自适应 · 实战进阶