30 lines
832 B
Markdown
30 lines
832 B
Markdown
---
|
||
title: "响应式断点策略"
|
||
type: concept
|
||
tags: [UX, 响应式设计, 移动优先]
|
||
---
|
||
|
||
## 定义
|
||
基于移动优先（Mobile First）的响应式设计方法论，通过定义多个屏幕宽度断点实现跨设备一致体验。
|
||
|
||
## 断点标准
|
||
- **Mobile**: 320px+（基础设计）
|
||
- **Tablet**: 768px+
|
||
- **Desktop**: 1024px+
|
||
- **Large**: 1280px+
|
||
|
||
## 核心原则
|
||
1. 从小屏幕开始设计，逐步增强
|
||
2. 使用 min-width 而非 max-width 媒体查询
|
||
3. 确保触摸目标和内容可读性
|
||
4. 考虑横屏和竖屏适配
|
||
|
||
## 布局模式
|
||
- **Hero Section**: 全视口高度，垂直居中
|
||
- **Content Grid**: 桌面端双列，移动端单列
|
||
- **Card Layout**: CSS Grid auto-fit，最小 300px 卡片
|
||
- **Sidebar Layout**: 2fr 主内容 + 1fr 侧边栏
|
||
|
||
## 相关概念
|
||
- [[CSS 设计系统]]
|
||
- [[组件架构]] |