窗口缩放错位或溢出主因是固定宽高、缺max-width及盒模型误用；应设max-width:100%、用min-height/vh、flex-wrap换行、移动优先媒体查询、flex-shrink:0防压缩、grid用repeat(auto-fit,minmax())、字体用clamp()弹性适配。
窗口缩放时元素错位或溢出怎么办
多数异常源于固定宽高、未设 max-width 或忽略了盒模型行为。浏览器默认用 content-box，但若全局重置为 border-box 后又混用内边距，就容易在小屏下撑破容器。
- 检查所有带
width的元素是否配了max-width: 100%（尤其） - 避免对布局容器写死
height: 400px，改用min-height或vh单位（如min-height: 100vh） - 父容器若用了
display: flex，子项默认不换行，需加flex-wrap: wrap才能响应缩放
media query 断点没生效的常见原因
不是断点写得不对，而是优先级或触发条件被忽略。CSS 是从上到下解析的，后写的规则会覆盖前面同权重的规则；同时，width 媒体查询检测的是视口宽度，不是元素宽度。
- 确保媒体查询写在常规样式之后，否则会被覆盖
- 用
min-width而非max-width实现“移动优先”，更易维护 - 避免在媒体查询里重复声明已定义的属性，只覆盖需要变的部分
- 测试时清掉浏览器缓存，某些旧版 Safari 对
@media (hover: hover)类特性有兼容问题
Flexbox 在小屏下内容挤成一团
根本原因是 flex-shrink 默认为 1，当空间不足时，子项会主动压缩自身。这不是 bug，是设计行为，但常被误认为“布局崩了”。
- 给关键子项加
flex-shrink: 0防止被压缩（比如 logo、操作按钮） - 用
flex-basis替代width控制初始尺寸，它参与 flex 计算更可控 - 慎用
flex: 1——它等价于flex: 1 1 0%，意味着可伸缩也可收缩，小屏下极易失衡
Grid 布局在缩放时列数不变
显式定义的 grid-template-columns: 200px 200px 200px 不会自适应，必须用 repeat() + minmax() + auto-fit 组合才能真正响应。
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
-
auto-fit和auto-fill行为不同：前者会合并空轨道，后者保留空格，选auto-fit更实用 -
minmax(250px, 1fr)中的250px是最小列宽，低于该值就换行；1fr是剩余空间均分，不是固定比例 - 如果网格项内有绝对定位元素，它们不会触发网格自动换行，需额外用
position: relative约束父项
rem 基准没配合 vw 动态调整，或忘了给 body 设 font-size: clamp(1rem, 2.5vw, 1.25rem) 这类弹性字号。 
