# 响应式移动优先 ## 断点策略 // Tailwind 默认断点（移动优先） // sm: 640px // MD: 768px // 长：1024px // xl: 1280 像素 // 2xl: 1536px // 为移动设备编写基本样式，为更大的屏幕添加断点

## 粘性标题 // 组件/布局/Header.tsx '使用客户端'；从 'react' 导入 { useState, useEffect }; 从 '@/lib/utils' 导入 { cn }；导出函数 Header() { const [isScrolled, setIsScrolled] = useState(false); 使用效果（（）=> { const handleScroll = () => setIsScrolled(window.scrollY > 10); window.addEventListener('滚动',handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); 返回（ <标题类名={cn( '固定 top-0 left-0 right-0 z-50 过渡-所有持续时间-300', 已滚动？ 'bg-背景/95 背景-模糊-sm 阴影-sm' : '背景透明' )} >

<标志/> {/* 桌面导航 */}

<导航链接/> <按钮>立即预订

{/* 移动菜单按钮 */} ）； } ## 移动导航抽屉 '使用客户端'；从'react'导入{useState}；从“framer-motion”导入{motion，AnimatePresence}；从 'lucide-react' 导入 { X, Menu }; 导出函数 MobileNav() { const [isOpen, setIsOpen] = useState(false); 返回（ <> <按钮 onClick={() => setIsOpen(true)} 类名=“md：隐藏的p-2” aria-label="打开菜单" > <菜单类名=“w-6 h-6”/> <动画存在> {已打开 && ( <> {/* 背景 */} <运动.div 初始={{不透明度:0}} 动画={{不透明度:1}} 退出={{ 不透明度: 0 }} onClick={() => setIsOpen(false)} className="固定 inset-0 bg-black/50 z-50 md:hidden" /> {/* 抽屉 */} <运动.div 初始={{ x: '100%' }} 动画={{ x: 0 }} 退出={{ x: '100%' }} 过渡={{类型：'补间'，持续时间：0.3}} className="固定 top-0 right-0 Bottom-0 w-80 bg-background z-50 md:hidden" >

<按钮 onClick={() => setIsOpen(false)} 类名=“p-2” aria-label="关闭菜单" >

setIsOpen(false)}> 首页 setIsOpen(false)}> 服务 {/* 更多链接 */}

<按钮类名=“w-full”大小=“lg”> 预约会议

)} ）； } ## 浮动移动 CTA // 组件/FloatingCTA.tsx '使用客户端'；从 'react' 导入 { useState, useEffect }; 从“framer-motion”导入{motion，AnimatePresence}；从“下一个/链接”导入链接；从 'next-intl' 导入 { useLocale } ；导出函数 FloatingCTA() { const [isVisible, setIsVisible] = useState(false); const locale = useLocale(); 使用效果（（）=> { 常量handleScroll = () => { // 滚动经过英雄后显示 setIsVisible(window.scrollY > 500); }; window.addEventListener('滚动',handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); 返回（ <动画存在> {可见&& ( <运动.div 初始={{ y: 100, 不透明度: 0 }} 动画={{ y: 0, 不透明度: 1 }} 退出={{ y: 100, 不透明度: 0 }} className =“固定bottom-6 left-4 right-4 z-40 md：隐藏” > <链接 href={`/${locale}/book`} className =“块w-full bg-primary text-primary-foreground text-center py-4 rounded-full font-mediumshadow-lg” > 预约会议 )} ）； } ## 响应式网格图案 // 1-2-3列网格

{items.map(item => )}

// 侧边栏布局

{/* 主要内容 */}

// 带有文本/图像的英雄

{/* 文本内容 */}

{/* 图片 */}

## 触摸友好目标 // 最小 44x44px 触摸目标

响应式移动优先

包含技能