固定宽度组件小屏溢出需四维响应：用max-width+width+box-sizing控制宽度，媒体查询调padding/font-size，overflow-x:hidden防横滚，word-break处理长文本。
固定宽度组件在小屏上溢出，本质是“宽度写死”和“视口变小”的冲突。直接换成百分比宽度只是第一步，关键还得配合最大宽度限制、内边距适配和媒体查询做分层响应。
用 max-width 替代 width，保留弹性空间
单纯把 width: 300px 改成 width: 100% 容易撑满全屏，失去设计控制。更稳妥的是：
- 用
max-width: 300px保证大屏下不拉伸变形 - 加
width: 100%让它在小屏自动收缩 - 再配上
box-sizing: border-box，避免 padding/border 加宽溢出
用媒体查询按断点收紧内边距和字体
组件缩小时，如果 padding 还是 20px、字体还是 16px，内容会显得拥挤甚至换行错乱。建议：
- 在
@media (max-width: 480px)中把 padding 减到 12px 或 8px - 把 font-size 调整为 14px 或用
rem配合根字体缩放 - 必要时隐藏非核心图标或文字（如用
display: none）
给容器加 overflow-x: hidden 防意外横滚
即使组件本身适配了，子元素（比如长文本、未换行的代码块、浮动布局）仍可能横向撑开。简单有效的一招：
立即学习“前端免费学习笔记（深入）”；
- 在外层容器（如
.card或.section）加overflow-x: hidden - 避免全局加在
body上，否则会截断正常滚动 - 搭配
word-break: break-word或white-space: normal处理长单词
基本上就这些。不复杂但容易忽略——关键是别只改 width，要从宽度、内边距、文字、溢出四方面一起调。
