第五章：主题与样式定制

响应式设计实践

1. 理解响应式设计原则

  • 移动优先策略：从最小屏幕尺寸开始设计，逐步增强大屏体验
  • 断点系统：利用Tailwind CSS的默认断点（sm:640px, md:768px, lg:1024px, xl:1280px）
  • 流体布局：使用百分比/视口单位而非固定像素值

2. Shadcn组件的响应式适配

// 示例：响应式按钮组
<div className="flex flex-col md:flex-row gap-2">
  <Button variant="outline" className="w-full md:w-auto">
    移动端全宽/桌面端自适应
  </Button>
</div>

3. 实用工具类组合技巧

  • 显示控制：hidden md:block（移动端隐藏/桌面端显示）
  • 间距调整：p-4 md:p-6（不同断点的内边距）
  • 网格布局：grid-cols-1 sm:grid-cols-2 lg:grid-cols-4

4. 自定义响应式行为

/* 在tailwind.config.js中扩展断点 */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      }
    }
  }
}

5. 实战案例：响应式导航栏

<nav className="px-4 py-3">
  <div className="flex flex-col md:flex-row items-center">
    <div className="md:hidden"> {/* 移动端菜单按钮 */}
      <MenuIcon />
    </div>
    <div className="hidden md:flex space-x-6"> {/* 桌面端导航项 */}
      <NavItem>首页</NavItem>
      <NavItem>产品</NavItem>
    </div>
  </div>
</nav>

6. 调试与测试工具

  • Chrome DevTools设备模拟器
  • @tailwindcss/aspect-ratio插件处理媒体元素
  • 使用window.matchMedia()API进行JS响应式控制

7. 性能注意事项

  • 避免过度使用@apply提取样式
  • 优先使用原生CSS Grid/Flex布局
  • 对图片使用srcset属性配合响应式布局

最佳实践提示：在Storybook中为每个组件创建响应式测试用例，确保在不同断点下的表现符合预期。

Last Updated::