---
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 设计系统]]
- [[组件架构]]