核心解法是用媒体查询动态缩放内边距，优先用rem或%替代px，按桌面≥1024px、平板768–1023px、手机≤767px三档调整padding，并配合box-sizing: border-box及单边控制防溢出。
小屏下padding太大导致内容横向溢出，核心解法是用媒体查询动态缩放内边距，而不是全局写死像素值。
优先用相对单位替代px
直接把padding从px换成rem或% ——rem随根字体缩放，%随父容器宽度变化，天然适配小屏。比如padding: 1rem 1.5rem在手机上会自动变小，比padding: 16px 24px更安全。
在关键断点用媒体查询收紧padding
针对主流设备宽度设三档调整：
- 桌面端（≥1024px）：保留较大padding，如padding: 24px 32px
- 平板（768px–1023px）：减为中等值，如padding: 16px 24px
- 手机（≤767px）：压到紧凑值，如padding: 12px 16px，甚至单边归零（padding-left: 0）
配合box-sizing防止叠加溢出
如果padding和border同时存在，记得加一句box-sizing: border-box。否则padding+border会超出设定的width，尤其在小屏百分比布局里极易触发横向滚动条。
立即学习“前端免费学习笔记（深入）”；
必要时对特定方向单独控制
不是所有方向都需要等比缩放。例如卡片右侧padding常因图标或操作按钮占位而溢出，可只调padding-right：
@media (max-width: 480px) { .card { padding-right: 8px; } }
基本上就这些。
