Implement modern responsive la…

# 官网首页响应式改造方案（容器查询版）

一、整体布局架构

• 使用现代布局方案：桌面端用 CSS Grid 定义主框架，移动端切换为单列 Flex/Block 流。
• 断点策略：媒体查询仅控制页面骨架（768px、1440px 为界），组件内部自适应交给容器查询。
• 移动优先：基础样式面向 375px 编写，再逐级向上增强。

二、容器查询处理产品展示区（核心）

1. 声明容器

```css

.product-section { container-type: inline-size; container-name: products; }

```

2. 按容器宽度分档

• @container products (max-width: 400px)：卡片纵向堆叠，图为宽幅。
• @container (min-width: 401px) and (max-width: 800px)：两列网格。
• @container (min-width: 801px)：三到四列网格，展示更多细节。

3. 优势：产品区可被复用于首页、侧边栏等不同位置，尺寸随父容器而非视口变化，不再错位。

三、三个尺寸的适配要点

375px 手机

• 导航折叠为汉堡菜单，隐藏次要入口。
• 产品卡片全宽、图片使用 aspect-ratio 固定比例，文字不换行错乱。
• 按钮和点击区域保持足够触控大小（建议不小于 44px 高）。

768px 平板

• 产品区两列布局，容器查询自动触发。
• Hero 区文字与配图左右分栏，图片用 object-fit: cover 防止拉伸变形。

1440px 桌面

• 内容区限最大宽度（如 1200–1400px 区间）并居中，避免超宽拉伸。
• 产品区三列以上，hover 效果与悬浮卡片增强。

四、防错位的关键细节

• 所有图片设 max-width: 100%; height: auto。
• 使用 gap 替代 margin 撑间距，避免负 margin 叠加错位。
• 字体用 clamp() 流式缩放，如 clamp(1rem, 2vw + 0.5rem, 1.5rem)。
• 测试工具：Chrome DevTools 设备模拟 + 容器查询调试面板逐档检查。

五、兼容性提醒

• 容器查询在主流现代浏览器均已支持；若需兼容旧浏览器，降级方案为媒体查询 + @supports 检测。