responsivelisted

## 核心原则：Mobile-First **先写移动端样式，再用断点前缀（`min-width`）逐步增强到大屏。** 这是 TailwindCSS 官方、Google Web Fundamentals、MDN 共同推荐的方法论。原因： - 移动端样式更简单，作为基础更易维护 - 渐进增强（加样式）比优雅降级（减样式）逻辑更清晰 - 移动设备加载更少 CSS，性能更好 - TailwindCSS 原生就是 mobile-first 设计（无前缀 = 所有尺寸，`md:` = `min-width: 768px` 及以上） - Google 自 2021 年起完全采用 mobile-first indexing，移动端体验直接影响 SEO > **例外**：后台管理系统、数据面板等**桌面端为主**的产品，用户几乎不会在手机上使用，此时 desktop-first 更实际。判断依据是产品的实际用户设备分布，而非通用最佳实践。 ## 编写顺序 1. 先写无前缀样式 → 这就是移动端的样子 2. 加 sm: 前缀 → 640px+ 的调整 3. 加 md: 前缀 → 768px+ 的调整 4. 加 lg: 前缀 → 1024px+ 的调整 5. 加 xl:/2xl: → 更大屏幕的调整 示例——一个卡片网格： ```html <!-- 移动端: 单列 → sm: 双列 → lg: 三列 → xl: 四列 --> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> ... </div> ``` **错误做法（desktop-first）：** ```html <!-- 反模式：先写桌面端再用 max-width 缩减 --> <div class="grid grid-cols-4 max-lg:grid-cols-3 max-sm:grid-cols-1"> ``` ## TailwindCSS 断点速查 | 前缀 | min-width | 典型设备 | |------|-----------|---------| | (无) | 0px | 手机（**基础样式**） | | `sm` | 640px | 大手机 / 小平板 | | `md` | 768px | 平板 | | `lg` | 1024px | 笔记本 | | `xl` | 1280px | 桌面显示器 | | `2xl` | 1536px | 大屏 | ## 常见适配模式 ### 布局结构变化 ```html <!-- 移动端纵向堆叠 → 桌面端横向排列 --> <div class="flex flex-col lg:flex-row"> <aside class="w-full lg:w-64 shrink-0">...</aside> <main class="flex-1 min-w-0">...</main> </div> ``` ### 显示 / 隐藏 ```html <!-- 移动端汉堡菜单，桌面端侧边栏 --> <nav class="hidden lg:block">桌面导航</nav> <button class="lg:hidden">菜单图标</button> ``` ### 间距与字号 ```html <!-- 移动端紧凑 → 桌面端宽松 --> <section class="px