先把当时的情况摆出来。站点断点设在 768px，竖屏平板正好是 768，横屏变成 1024 直接切到桌面布局。iPad 上打开商品列表时，侧边栏挤掉一半宽度，图片和文字错位，移动体验报告里平板设备的布局问题占了三分之一。
真正麻烦的地方在于，几个原因的现象几乎一样。断点用固定像素和常见设备宽度刚好重合 临界值两边表现完全不同。少数情况下是桌面布局依赖 hover 交互 触屏设备点不出来。
另外，侧边栏在平板宽度下没有隐藏 主内容被压到 300px 以内。少数情况下是字体和间距按桌面尺寸写死 平板上整体偏小。
动手时先看不同宽度下的实际排版
curl -s https://www.example.com/list | grep -o 'min-width:[^)]*' | sort -u | head然后把断点错开常见设备宽度
@media (min-width: 1024px) { .sidebar { display: block; } }给触屏设备补上非 hover 的交互路径
@media (hover: none) { .menu:hover .sub { display: none; } .menu.open .sub { display: block; } }限制侧栏宽度避免挤压主内容
.sidebar { flex: 0 0 240px; } .main { min-width: 0; }恢复的判定其实很直接。断点改到 1024 并把侧栏收进抽屉后，平板横竖屏切换不再错位，移动体验报告里平板相关的布局问题基本清零。
容易忽略的是，断点不要贴着主流设备宽度，错开二三十像素比反复调样式省事得多。线上能稳定复现的问题都不算难，难的是只在大流量下才出现的那种。