# 移动优先响应式设计 (2025/2026) ## 核心理念移动优先设计是 **2025/2026 年的行业标准**。由于移动流量持续超过全球网络流量的 60%，并且 Google 的移动优先索引，从移动开始可确保最佳的用户体验和 SEO 性能。 ### 移动优先的心态

从小事做起，向上提升

开始大，减少（更多代码，更多错误）

**关键原则**：无前缀实用程序适用于所有屏幕尺寸。断点前缀适用于该大小及以上。 ## 2025/2026 断点策略 ### Tailwind 的默认断点前缀|最小宽度 |目标设备 ---|---|--- （无）| 0 像素 |所有手机（底座） `sm：` | 640 像素（40 雷姆）|大手机、小平板电脑 `MD：` | 768 像素（48 雷姆）|平板电脑（纵向） `lg：` | 1024 像素（64 雷姆）|平板电脑（横向）、笔记本电脑 `xl：` | 1280 像素（80 雷姆）|台式机 `2xl：` | 1536 像素（96 雷姆）|大型台式机 ### 内容驱动的断点 **2025/2026 最佳实践**：让内容决定断点，而不是设备尺寸。 @主题{ /* 根据您的内容需求覆盖默认值 */ --断点-sm: 36rem; /* 576px - 当您的内容需要更多空间时 */ --断点-md: 48rem; /* 768 像素 */ --断点-lg: 62rem; /* 992px - 通用内容宽度 */ --断点-xl: 75rem; /* 1200 像素 */ --breakpoint-2xl: 90rem; /* 1440 像素 */ /* 针对特定内容需求添加自定义断点 */ --断点-xs: 20rem; /* 320px - 非常小的设备 */ --breakpoint-3xl: 120rem; /* 1920px - 超宽 */ } ### 屏幕覆盖策略

移动底座

平板电脑增强

桌面增强

宽桌面

## 流体排版系统 ### 用于平滑缩放的 CSS 钳位流畅的排版消除了断点之间不和谐的尺寸跳跃： @主题{ /* 流体排版比例 */ --text-fluid-xs: 钳位(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-fluid-sm: 钳位(0.875rem, 0.8rem + 0.375vw, 1rem); --text-fluid-base: 夹具(1rem, 0.9rem + 0.5vw, 1.125rem); --text-fluid-lg: 钳位(1.125rem, 1rem + 0.625vw, 1.25rem); --text-fluid-xl: 钳位(1.25rem, 1rem + 1.25vw, 1.5rem); --text-fluid-2xl: 钳位(1.5rem, 1.1rem + 2vw, 2rem); --text-fluid-3xl: 钳位(1.875rem, 1.2rem + 3.375vw, 2.5rem); --text-fluid-4xl: 钳位(2.25rem, 1rem + 6.25vw, 3.5rem); --text-fluid-5xl: 钳位(3rem, 1rem + 10vw, 5rem); } **对于可访问性很重要**：始终将“vw”与“rem”结合起来，以尊重用户缩放首选项（WCAG 合规性）。 ### 使用流体排版

响应式标题

正文文本随视口按比例缩放同时尊重用户的字体大小偏好。

章节标题

## 流体间隔系统 ### 基于夹具的间距 @主题{ /* 流体间距刻度 */ --spacing-fluid-xs: 夹具(0.25rem, 0.2rem + 0.25vw, 0.5rem); --spacing-fluid-sm: 夹具(0.5rem, 0.4rem + 0.5vw, 1rem); --spacing-fluid-md: 夹具(1rem, 0.75rem + 1.25vw, 2rem); --spacing-fluid-lg: 夹具(1.5rem, 1rem + 2.5vw, 3rem); --spacing-fluid-xl: 夹具(2rem, 1.25rem + 3.75vw, 4rem); --spacing-fluid-2xl: 夹具(3rem, 1.5rem + 7.5vw, 6rem); --spacing-fluid-section: 夹具(4rem, 2rem + 10vw, 8rem); } ### 使用流体间距

部分标题

英雄称号

英雄描述

## 触摸友好的交互元素 ### WCAG 2.2 触摸目标要求 **最小尺寸（2025 年标准）**： * **WCAG 2.2 AA 级**：最小 24x24 CSS 像素 * **推荐**：44x44 CSS 像素（Apple、Google、Microsoft 指南） * **最佳**：关键操作的 48x48 CSS 像素 ## 容器查询（2025 年游戏规则改变者）容器查询支持**组件级响应**，与视口大小无关。 ### 设置 @导入“tailwindcss”； @plugin“@tailwindcss/容器查询”； ### 容器查询断点班级 |最小宽度 ---|--- `@xs` | 20 雷姆（320 像素） `@sm` | 24 雷姆 (384 像素) `@md` | 28 雷姆（448 像素） `@lg` | 32 雷姆（512 像素） `@xl` | 36 雷姆 (576 像素) `@2xl` | 42 雷姆（672 像素） `@3xl` | 48 雷姆（768 像素） `@4xl` | 56 雷姆（896 像素） `@5xl` | 64 雷姆（1024 像素） ### 实用容器查询模式 <文章类=“@container”> <图片源=“...” 类=“ w-完整 @sm:w-32 @lg:w-48 方面视频 @sm:aspect-square 对象覆盖圆形 LG ” />

卡牌名称

适应可用空间的描述...

标签

### 命名容器 <主类=“@container/main flex-1”> ### 何时使用容器查询与视口查询使用容器查询 |使用视口查询 ---|--- 可重复使用的组件|页面级布局侧边栏小部件 |导航栏卡片网格|英雄部分嵌入内容 |全宽部分 CMS/动态内容 |修复了应用程序外壳 ## 响应式布局模式 ### 移动优先网格系统

### 响应式 Flexbox 模式

内容 1

内容 2

项目 1

项目 2

项目 3

标题

说明

### 响应式侧边栏布局

<除了类=” 隐藏 lg:flex lg:flex-col w-64 边框-r bg-灰色-50 ” >

内容

桌面导航

内容

### 圣杯布局 (2025)

Tailwindcss 移动优先

包含技能