常见错误一：固定宽度布局
使用固定像素宽度（如width: 960px）是最常见的自适应设计错误。固定宽度在桌面端可能显示正常，但在手机和平板上会出现水平滚动条或内容被截断。正确的做法是使用相对单位（百分比、vw/vh、flex、grid）和max-width/min-width约束，让布局根据容器大小自适应。
常见错误二：图片未自适应
图片未设置max-width: 100%是另一个常见错误。大图片在小屏幕上会超出容器，破坏布局或导致水平滚动。所有图片都应设置img { max-width: 100%; height: auto; }，确保图片不会超出容器宽度。对于背景图片，使用background-size: cover或contain确保正确填充。
常见错误三：字体使用固定像素
使用固定像素（px）定义字体大小会影响可访问性。用户可能调整了浏览器的默认字体大小，但固定像素不会响应这个设置。正确的做法是使用相对单位（rem、em），并以浏览器默认字体大小（16px）为基准。例如：body { font-size: 16px; } h1 { font-size: 2rem; /* 32px */ }。
常见错误四：触摸元素过小
在桌面端使用鼠标可以精确点击小元素，但在移动端使用手指点击需要更大的触摸区域。按钮和链接的最小触摸目标应为44x44像素（Apple的建议）或48x48像素（Google Material Design的建议）。相邻的触摸元素之间应保持至少8像素的间距，避免误触。
常见错误五：依赖hover交互
hover效果（如鼠标悬停显示下拉菜单）在触摸设备上无法正常工作。设计方案应考虑触摸和鼠标两种交互方式：主菜单在移动端转为汉堡菜单或始终可见；下拉菜单通过点击展开而非hover；tooltip通过长按或点击触发；确保所有功能在无hover状态下可用。
常见错误六：未在不同设备测试
仅在桌面浏览器缩放窗口测试自适应设计是不够的。不同设备的浏览器引擎、屏幕分辨率、像素密度都有差异。必须在真实设备上测试（iPhone、iPad、Android手机），或使用BrowserStack等跨浏览器测试平台。测试要点包括：布局是否正确、文字是否可读、交互是否正常、性能是否可接受。
常见错误七：过度隐藏内容
为了移动端简洁，有时会选择隐藏部分内容（display: none）。但如果隐藏了重要内容（如产品描述、FAQ），会影响SEO和用户体验。Google建议移动端和桌面端展示相同的主要内容。如果某些内容在移动端不显示，应确保它是次要内容，并使用折叠（accordion）而非完全隐藏，让用户可以选择展开查看。