SearcjGal-frontend/docs/RESPONSIVE_DESIGN.md

响应式设计指南

本项目采用移动优先（Mobile-First）的响应式设计策略，使用 Tailwind CSS 的断点系统确保在所有设备上都有出色的用户体验。

📱 断点系统

Tailwind CSS 断点

断点	最小宽度	设备类型	说明
默认	0px	移动设备（竖屏）	320px - 639px
sm:	640px	移动设备（横屏）/ 小平板	640px - 767px
md:	768px	平板设备	768px - 1023px
lg:	1024px	笔记本电脑	1024px - 1279px
xl:	1280px	桌面显示器	1280px - 1535px
2xl:	1536px	大屏显示器	1536px+

常见设备尺寸参考

移动设备

• iPhone SE: 375 x 667
• iPhone 12/13/14: 390 x 844
• iPhone 14 Pro Max: 430 x 932
• Samsung Galaxy S21: 360 x 800
• Google Pixel 5: 393 x 851

平板设备

• iPad Mini: 768 x 1024
• iPad Air: 820 x 1180
• iPad Pro 11": 834 x 1194
• iPad Pro 12.9": 1024 x 1366

桌面设备

• 笔记本: 1366 x 768, 1440 x 900, 1920 x 1080
• 显示器: 1920 x 1080, 2560 x 1440, 3840 x 2160

🎨 响应式设计原则

1. 移动优先（Mobile-First）

从最小屏幕开始设计，逐步增强到大屏幕：

<!-- ❌ 错误：桌面优先 -->
<div class="text-2xl sm:text-xl md:text-base">

<!-- ✅ 正确：移动优先 -->
<div class="text-base sm:text-xl md:text-2xl">

2. 渐进增强（Progressive Enhancement）

基础功能在所有设备上可用，高级功能在大屏幕上增强：

<!-- 基础布局 + 渐进增强 -->
<div class="p-3 sm:p-4 md:p-6 lg:p-8">
  <h1 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl">

3. 触摸友好（Touch-Friendly）

移动设备上的点击目标至少 44x44 像素：

<!-- 按钮尺寸 -->
<button class="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14">

<!-- 间距 -->
<div class="gap-2 sm:gap-3 md:gap-4">

4. 内容优先（Content-First）

移动端隐藏次要内容，桌面端显示完整内容：

<!-- 条件显示 -->
<div class="hidden md:block">桌面端额外内容</div>
<div class="block md:hidden">移动端简化内容</div>

📐 组件响应式设计

SearchHeader 组件

<!-- 容器 -->
<div class="container mx-auto w-full px-4 sm:px-6 lg:px-8 py-4 sm:py-6">

<!-- 标题 -->
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold">

<!-- 输入框 -->
<input class="pl-10 sm:pl-12 pr-4 py-3 sm:py-4 text-sm sm:text-base">

<!-- 按钮 -->
<button class="py-3 sm:py-4 text-base sm:text-lg">

设计要点：

• 移动端：紧凑布局，减小间距
• 平板端：适中尺寸，平衡空间
• 桌面端：宽松布局，增大字号

SearchResults 组件

<!-- 容器 -->
<div class="px-2 sm:px-4 md:px-6 py-4 sm:py-6 md:py-8">

<!-- 卡片 -->
<div class="p-3 sm:p-4 md:p-6">

<!-- 标题 -->
<h3 class="text-lg sm:text-xl font-bold">

<!-- 列表项 -->
<div class="p-2 sm:p-3">

设计要点：

• 移动端：单列布局，全宽卡片
• 平板端：适当间距，优化阅读
• 桌面端：最大宽度限制，居中对齐

VndbPanel 组件

<!-- 面板定位 -->
<div class="
  fixed 
  inset-x-2 bottom-20           /* 移动端：左右留白，底部固定 */
  sm:inset-x-auto sm:bottom-24  /* 小屏：自动宽度 */
  sm:right-6 sm:w-96            /* 小屏：右侧固定，固定宽度 */
  md:w-[28rem]                  /* 中屏：更宽 */
  lg:w-[32rem]                  /* 大屏：最宽 */
">

<!-- 内容区域 -->
<div class="p-3 sm:p-4 md:p-6">

<!-- 信息卡片 -->
<div class="grid grid-cols-1 gap-3">

设计要点：

• 移动端：全屏宽度，底部弹出
• 平板端：侧边栏模式，固定宽度
• 桌面端：更宽侧边栏，更多信息

FloatingButtons 组件

<!-- 按钮容器 -->
<div class="
  fixed 
  bottom-4 sm:bottom-6          /* 底部间距 */
  right-4 sm:right-6            /* 右侧间距 */
  gap-2 sm:gap-3                /* 按钮间距 */
">

CSS 断点：

.fab-button {
  width: 44px;   /* 移动端 */
  height: 44px;
  font-size: 18px;
}

@media (min-width: 640px) {
  .fab-button {
    width: 52px;   /* 平板端 */
    height: 52px;
    font-size: 22px;
  }
}

@media (min-width: 1024px) {
  .fab-button {
    width: 56px;   /* 桌面端 */
    height: 56px;
    font-size: 24px;
  }
}

PlatformNav 组件

<!-- 导航容器 -->
<div class="
  hidden md:block              /* 移动端隐藏 */
  fixed 
  left-2 lg:left-4             /* 左侧间距 */
  top-1/2 -translate-y-1/2     /* 垂直居中 */
">

<!-- 按钮 -->
<button class="
  p-3 lg:p-4                   /* 内边距 */
  text-lg lg:text-xl           /* 字号 */
">

设计要点：

• 移动端：完全隐藏（节省空间）
• 平板端：显示导航，紧凑样式
• 桌面端：完整导航，宽松样式

🔧 常用响应式模式

1. 间距系统

<!-- 内边距 -->
<div class="p-2 sm:p-3 md:p-4 lg:p-6 xl:p-8">

<!-- 外边距 -->
<div class="m-2 sm:m-3 md:m-4 lg:m-6 xl:m-8">

<!-- 间隙 -->
<div class="gap-2 sm:gap-3 md:gap-4 lg:gap-6">

2. 字体大小

<!-- 标题 -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
<h2 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl">
<h3 class="text-lg sm:text-xl md:text-2xl lg:text-3xl">

<!-- 正文 -->
<p class="text-sm sm:text-base md:text-lg">

<!-- 小字 -->
<span class="text-xs sm:text-sm">

3. 布局切换

<!-- 垂直 → 水平 -->
<div class="flex flex-col sm:flex-row">

<!-- 单列 → 多列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">

<!-- 隐藏 → 显示 -->
<div class="hidden sm:block">
<div class="block sm:hidden">

4. 宽度控制

<!-- 全宽 → 固定宽 -->
<div class="w-full sm:w-96 md:w-[28rem] lg:w-[32rem]">

<!-- 最大宽度 -->
<div class="max-w-full sm:max-w-2xl md:max-w-4xl lg:max-w-6xl xl:max-w-7xl">

<!-- 计算宽度 -->
<div class="w-[calc(100vw-1rem)] sm:w-96">

5. 圆角和阴影

<!-- 圆角 -->
<div class="rounded-lg sm:rounded-xl md:rounded-2xl lg:rounded-3xl">

<!-- 阴影 -->
<div class="shadow-md sm:shadow-lg md:shadow-xl lg:shadow-2xl">

📊 性能优化

1. 图片响应式

<!-- 响应式图片 -->
<img 
  src="image.jpg"
  srcset="image-320w.jpg 320w,
          image-640w.jpg 640w,
          image-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  loading="lazy"
  alt="描述"
>

2. 条件加载

<script setup>
import { computed } from 'vue'

// 根据屏幕尺寸加载不同内容
const isMobile = computed(() => window.innerWidth < 640)
const isTablet = computed(() => window.innerWidth >= 640 && window.innerWidth < 1024)
const isDesktop = computed(() => window.innerWidth >= 1024)
</script>

<template>
  <MobileComponent v-if="isMobile" />
  <TabletComponent v-else-if="isTablet" />
  <DesktopComponent v-else />
</template>

3. 媒体查询

/* 移动端优先 */
.component {
  /* 基础样式 */
}

@media (min-width: 640px) {
  .component {
    /* 平板样式 */
  }
}

@media (min-width: 1024px) {
  .component {
    /* 桌面样式 */
  }
}

✅ 测试检查清单

移动设备测试

• iPhone SE (375px)
• iPhone 12/13/14 (390px)
• iPhone 14 Pro Max (430px)
• Android 小屏 (360px)
• Android 大屏 (412px)

平板设备测试

• iPad Mini (768px)
• iPad Air (820px)
• iPad Pro 11" (834px)
• iPad Pro 12.9" (1024px)

桌面设备测试

• 笔记本 (1366px, 1440px)
• 显示器 (1920px)
• 2K 显示器 (2560px)
• 4K 显示器 (3840px)

功能测试

• 导航菜单在所有设备上可用
• 表单输入在移动端易于操作
• 按钮大小符合触摸标准（44x44px+）
• 文字大小在所有设备上可读
• 图片在所有设备上正确显示
• 布局在横屏和竖屏都正常
• 滚动流畅，无性能问题
• 浮动元素不遮挡重要内容

🎯 最佳实践

1. 使用相对单位

/* ✅ 推荐 */
font-size: 1rem;
padding: 1em;
width: 100%;
max-width: 48rem;

/* ❌ 避免 */
font-size: 16px;
padding: 16px;
width: 768px;

2. 触摸目标尺寸

<!-- 最小 44x44 像素 -->
<button class="min-w-[44px] min-h-[44px]">

3. 文字可读性

<!-- 行高 -->
<p class="leading-relaxed sm:leading-loose">

<!-- 字间距 -->
<p class="tracking-normal sm:tracking-wide">

<!-- 最大宽度（提高可读性） -->
<p class="max-w-prose">

4. 避免固定定位冲突

<!-- 确保浮动元素不重叠 -->
<div class="fixed bottom-20 sm:bottom-24">  <!-- 避开底部按钮 -->
<div class="fixed bottom-4 sm:bottom-6">    <!-- 底部按钮 -->

5. 使用语义化 HTML

<!-- ✅ 语义化 -->
<nav>
<main>
<article>
<section>

<!-- ❌ 过度使用 div -->
<div class="nav">
<div class="main">

📚 参考资源

• Tailwind CSS 响应式设计
• MDN 响应式设计
• Google Web Fundamentals
• Material Design 响应式布局

---

最后更新：2025-01-19