统一box-sizing为border-box并用rem/vw等相对单位替代px，结合语义化媒体查询与flex/grid显式控制，可解决响应式尺寸混乱。
解决CSS响应式布局尺寸混乱，核心是统一盒模型并建立可预测的尺寸计算逻辑。默认的box-sizing: content-box会让padding和border额外增加元素宽度，导致在媒体查询中设定的“100%宽”实际溢出容器，这是多数混乱的根源。
强制使用border-box盒模型
在全局重置样式中统一设置box-sizing，让width/height始终包含padding和border：
- 在CSS最顶部添加：
* { box-sizing: border-box; } - 为避免影响某些第三方组件，更稳妥写法是：
*, *::before, *::after { box-sizing: border-box; } - 这样所有元素的width=content+padding+border，响应式断点计算不再“凭空多出像素”
用相对单位替代固定像素（px）
px在不同DPR（设备像素比）和缩放级别下表现不一致，易引发布局错位：
- 宽度优先用
%、rem（基于根字体）、vw/vh（视口百分比） - 字体大小统一用
rem，配合JS或CSS媒体查询动态调整html的font-size（如：750px设计稿常用html { font-size: 100vw / 7.5; }） - 内边距/外边距慎用px，改用
rem或em保持比例协调
媒体查询按设备特性而非具体分辨率写
避免写@media (max-width: 768px)这种“猜尺寸”方式，改用更可靠的断点依据：
立即学习“前端免费学习笔记（深入）”；
- 按容器而非视口断点：用
container queries（现代浏览器支持），让组件自主响应其父容器宽度 - 按设备能力断点：如
@media (hover: hover) and (pointer: fine)区分鼠标/触控 - 若仍需视口断点，推荐基于设计系统定义语义化断点，例如：
$breakpoint-sm: 576px; $breakpoint-md: 768px; $breakpoint-lg: 992px;，并在变量中统一维护
检查flex/grid中的隐式尺寸干扰
Flex和Grid容器内子项的默认行为常被忽略，引发意外拉伸或收缩：
- Flex项目默认有
flex-shrink: 1，小屏下可能被压缩变形——必要时设flex-shrink: 0 - Grid列用
fr单位时，确保内容不会撑破容器；搭配minmax(0, 1fr)防止文字溢出 - 图片等替换元素默认
max-width: none，务必加img { max-width: 100%; height: auto; }
