响应式设计

响应式设计

确保你的产品在各种设备上都有良好的体验。

什么是响应式设计

响应式设计让网页能够：

自动适应不同屏幕尺寸

在手机、平板、电脑上都好用

不需要开发多个版本

断点说明

Thinkus 使用的屏幕断点：

设备宽度说明 手机< 640px小屏幕，单列布局 平板640-1024px中屏幕，双列布局 电脑> 1024px大屏幕，多列布局

自动适配

默认情况下，AI 会自动处理：

导航栏

电脑：展开的导航链接

手机：汉堡菜单

布局

电脑：多列并排

手机：单列堆叠

字体大小

自动调整，确保可读性

按钮尺寸

手机上自动放大，方便点击

特殊要求

如果有特殊的适配需求，可以告诉 Sarah：

> "手机上隐藏侧边栏"

> "平板上图片放在文字上方"

> "大屏幕显示 4 列，小屏幕显示 2 列"

移动优先

我们采用"移动优先"的设计策略：

先确保手机上体验良好

再逐步增强大屏幕功能

确保核心功能在所有设备可用

测试方法

预览模式

切换不同设备尺寸预览

实时查看适配效果

真机测试

部署后用手机访问

检查实际体验

常见问题

Q: 图片怎么处理？ A: 自动压缩和适配，保证加载速度

Q: 视频怎么适配？ A: 等比缩放，保持比例

Q: 表格在手机上怎么办？ A: 水平滚动或转为卡片形式