固定宽高元素在小屏溢出是因为 width/height 使用绝对像素值，不随视口缩放；应改用 width: 100%; max-width: 300px; min-width: 240px 配合 min-height 和媒体查询实现响应式。
固定宽高的 CSS 元素为什么在小屏上会溢出
因为 width: 300px; height: 200px; 这类声明是绝对尺寸，不随视口缩放。当屏幕宽度小于元素宽度时，就会触发横向滚动条或内容被裁剪——尤其在移动端，300px 可能已超过 device-width。
用 max-width 和 min-width 替代固定 width
这不是“替代”而是“约束”：保留设计意图的同时允许弹性收缩。关键在于把固定值转为上限/下限，并配合 width: 100% 触发流式行为。
-
width: 100%让元素占满父容器（通常是body或响应式容器） -
max-width: 300px防止在大屏上无限撑开，守住设计上限 -
min-width: 240px避免在极窄屏（如折叠屏竖向）下压缩变形（比如文字过小、按钮不可点） - 高度通常不设
min-height，除非内容需保底可视区域；固定height易导致内容溢出，优先用min-height+padding控制视觉高度
.card {
width: 100%;
max-width: 300px;
min-width: 240px;
min-height: 180px;
padding: 16px;
}
什么时候必须加 @media 查询而不是只靠 max-width
max-width 解决的是“单个元素的尺寸弹性”，但页面结构、间距、字体、交互方式在不同设备上需要整体调整——这时 @media 不可省略。
- 当固定宽高块需要从横向排列改为纵向堆叠（比如
display: flex; flex-direction: row → column） - 当字体大小在小屏需缩小（
font-size: 18px→14px），否则文字换行异常或溢出 - 当边距（
margin/padding）在移动端需减半，避免留白过大挤占内容空间 - 当大屏下希望同一区域显示两个并列卡片，而小屏只显示一个——仅靠
max-width无法控制数量，必须用媒体查询改flex-wrap或grid-template-columns
@media (max-width: 480px) {
.card {
font-size: 14px;
padding: 12px;
}
.card-grid {
grid-template-columns: 1fr;
}
}
容易忽略的兼容与细节
很多问题不是写法错，而是漏了基础约束或误判了单位行为：
立即学习“前端免费学习笔记（深入）”；
-
max-width的值若用rem或em，需确认根字体大小是否已响应式重设，否则可能失效 - 父容器没设
width: 100%或含white-space: nowrap，子元素的width: 100%会失效 - 使用
vh/vmax做高度适配时，iOS Safari 的地址栏收放会导致视口高度跳变，min-height比height更稳 -
@media (max-width: 768px)中的768px是 CSS 像素，不是设备物理像素；实际断点应结合设计稿和真机测试，而非硬套 iPad 宽度
