14. 🖥️ 响应式自适应 Responsive ★★★☆☆ Web 专属
🌏 Web 网页规范
- 核心布局: 媒体查询 `@media` 断点切换、Flexbox / Grid
- 图片适配: `srcset` 相对分辨率自适应加载最佳源
- 视口控制: `` 限制缩放比例
- 断点规则: 320px / 768px / 1024px / 1440px 经典规则
📱 App 移动端规范
- 核心布局: 约束布局 (Constraints) / 安全区域偏移适配
- 图片适配: @2x/@3x 切图、多密度矢量图
- 视口控制: 无法修改物理像素，随设备自动拉伸重绘
- 断点规则: 根据手机 (Compact) / 平板 (Regular) 尺寸分级
不同屏幕拥有不同的视觉结构。通过 流体网格、视口宽度单位 (vw/dvh) 以及响应式断点（Breakpoint），使整个布局从桌面版多栏平滑地折叠到移动版的单栏视图，确保内容阅读流不受阻碍。
LIVE PLAYGROUND: 页面断点分辨率动态自适应切换
点击按钮切换容器视口尺寸，观察内部网格的多栏折叠形变
https://web.meta-ui.edu/responsive-grid
🖼️ 封面图
📝 正文解析
📂 边栏侧栏
📋 大模型统一 Prompt (LLM Prompt)