核心解法是用媒体查询动态缩放内边距，优先用rem或%替代px，按桌面≥1024px、平板768–1023px、手机≤767px三档调整padding，并配合box-sizing: border-box及单边控制防溢出。
小屏下padding太大导致内容横向溢出，核心解法是用媒体查询动态缩放内边距，而不是全局写死像素值。
直接把padding从px换成rem或% ——rem随根字体缩放，%随父容器宽度变化，天然适配小屏。比如padding: 1rem 1.5rem在手机上会自动变小，比padding: 16px 24px更安全。
针对主流设备宽度设三档调整：
如果padding和border同时存在，记得加一句box-sizing: border-box。否则padding+border会超出设定的width，尤其在小屏百分比布局里极易触发横向滚动条。
立即学习“前端免费学习笔记（深入）”；
不是所有方向都需要等比缩放。例如卡片右侧padding常因图标或操作按钮占位而溢出，可只调padding-right：
@media (max-width: 480px) { .card { padding-right: 8px; } }
基本上就这些。
以上就是css padding太大导致小屏显示溢出怎么办_使用媒体查询按设备大小调整padding的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
663
收藏
