Name: 响应式设计模式
Rating: 5 (1 reviews)

name: 响应式设计模式 description: 移动优先的响应式设计模式，包含断点、流体布局和自适应组件 license: MIT metadata: adapted-by: ai-skills category: 前端开发

响应式设计模式

用于创建自适应、响应式用户界面的移动优先模式。

断点系统

export const breakpoints = {
  sm: '640px',   // 小型设备
  md: '768px',   // 中型设备
  lg: '1024px',  // 大型设备
  xl: '1280px',  // 特大设备
  '2xl': '1536px' // 2倍特大设备
};

// Tailwind 配置
module.exports = {
  theme: {
    screens: breakpoints
  }
};

移动优先方法

// 从移动端开始，为大屏幕增强
<div className="
  flex flex-col        /* 移动端：垂直堆叠 */
  md:flex-row          /* 平板及以上：并排排列 */
  gap-4
  p-4 md:p-6 lg:p-8   /* 渐进式间距 */
">
  <div className="
    w-full               /* 移动端：全宽 */
    md:w-1/3            /* 平板及以上：1/3宽度 */
  ">侧边栏</div>
  
  <div className="
    w-full
    md:w-2/3
  ">主要内容</div>
</div>

流体排版

/* 使用 clamp 实现流体缩放 */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

/* 容器查询 */
@container (min-width: 400px) {
  .card-title {
    font-size: 1.25rem;
  }
}

响应式图片

<picture>
  <source
    media="(min-width: 1024px)"
    srcSet="/images/hero-large.webp"
  />
  <source
    media="(min-width: 640px)"
    srcSet="/images/hero-medium.webp"
  />
  <img
    src="/images/hero-small.webp"
    alt="英雄图片"
    loading="lazy"
  />
</picture>

触摸友好模式

// 最小触摸目标：44x44像素
<button className="min-h-[44px] min-w-[44px] p-3">
  <Icon />
</button>

// 滑动手势
function useSwipe(onSwipeLeft?: () => void, onSwipeRight?: () => void) {
  const [touchStart, setTouchStart] = useState(0);
  const [touchEnd, setTouchEnd] = useState(0);
  
  const minSwipeDistance = 50;
  
  const onTouchStart = (e: TouchEvent) => {
    setTouchEnd(0);
    setTouchStart(e.targetTouches[0].clientX);
  };
  
  const onTouchMove = (e: TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };
  
  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    
    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;
    
    if (isLeftSwipe && onSwipeLeft) onSwipeLeft();
    if (isRightSwipe && onSwipeRight) onSwipeRight();
  };
  
  return { onTouchStart, onTouchMove, onTouchEnd };
}

集成点

补充：

前端设计系统：用于组件设计
无障碍模式：用于移动端无障碍
Web应用测试：用于响应式测试