响应式设计与现代布局
响应式设计原理
- 媒体查询核心机制：基于视口宽度、设备特性等条件应用不同样式
- 移动优先设计原则：从最小屏幕开始构建，逐步增强到大屏
- 断点设置策略：根据内容流式变化而非固定设备尺寸
现代布局方案
- Flexbox 弹性布局：一维布局，解决传统浮动布局痛点
- Grid 网格布局：二维布局系统，精确控制行列对齐
- 容器查询（Container Queries）：基于容器尺寸而非视口响应
性能优化要点
- 图片响应式处理：srcset、picture 元素、懒加载技术
- CSS 渲染性能：减少重排重绘，优化选择器性能
- 移动端适配：1px 边框、点击延迟、滚动优化方案
实战场景题
- 设计一个三栏布局，中间自适应，两侧固定宽度
- 实现卡片流式布局，每行根据容器宽度自动调整列数
- 移动端导航菜单，点击展开/收起，支持滑动操作
延伸推荐：
- CSS 新特性：Subgrid、CSS Houdini
- 响应式设计工具链：PostCSS、CSS-in-JS 方案
