断点设置依据主流设备视口宽度分布，优先用min-width移动优先原则，与设计稿布局变化对齐；媒体查询不改变权重，靠声明顺序生效；width指视口宽度，device-width指物理分辨率，响应式应优先用width。
媒体查询的断点设置依据是什么
断点不是凭感觉写的，得看主流设备的视口宽度分布。常见做法是参考 min-width 从窄到宽递进，比如 480px（老手机竖屏）、768px（平板竖屏）、1024px（平板横屏/小桌面）、1200px（常规桌面）。别用 max-width 堆叠写法，容易覆盖错，优先用 min-width + 移动优先原则。
实际项目中，断点应和设计稿对齐，而不是硬套“标准值”。如果设计只在 992px 和 1366px 有布局变化，那就只设这两个断点，别多加。
如何避免媒体查询样式被普通 CSS 覆盖
媒体查询本身不改变选择器权重，它只是包裹条件。所以 .header { color: red; } 和 @media (min-width: 768px) { .header { color: blue; } } 能生效，靠的是后者在 CSS 文件中位置更靠后（或相同权重下后声明者胜）。
- 确保媒体查询块写在对应基础样式之后
- 不要在媒体查询里重复写未改动的属性，只写需要变更的部分
- 如果用了 CSS 预处理器（如 Sass），用
@extend或@include复用时要留意展开后的顺序 - 调试时在浏览器开发者工具里检查计算样式，确认生效的是哪一条规则
@media 中 width 和 device-width 的区别
width 指浏览器窗口的视口宽度（viewport width），随用户缩放、分屏、调整窗口大小实时变化；device-width 指设备屏幕物理分辨率宽度（以设备像素为单位），基本固定不变，且现代浏览器（尤其 Chrome/Firefox）已不推荐使用，Safari 在某些 iOS 版本上行为也不一致。
立即学习“前端免费学习笔记（深入）”；
绝大多数响应式场景该用 width。只有极少数情况（比如判断是否为 iPhone X 系列做刘海适配）才可能结合 device-height 和 orientation，但这类写法脆弱、难维护，应优先用 CSS 容器查询或 JS window.screen 辅助判断。
移动端横向滚动问题怎么快速定位
页面意外出现横向滚动条，90% 是因为某个元素宽度超出了视口。媒体查询本身不会导致这个问题，但常因以下操作触发：
- 在
@media (min-width: 768px)里给容器设了固定宽度（如width: 1200px），而没配合max-width: 100% - 子元素使用
white-space: nowrap或display: inline-block且父容器未设overflow: hidden - 图片、表格、代码块等未加
max-width: 100%; height: auto;
快速验证方法：打开开发者工具 → 选中 body → 查看右侧“Computed”面板里的 width 和 overflow-x，再逐级往下点子元素，找实际宽度 > 视口宽度的那个节点。
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
上面这段常见写法看似合理，但一旦 .container 里有未约束宽度的子元素（比如一张 1300px 宽的图），就会撑破布局。真正安全的做法是把 width 换成 max-width，并确保所有直接子元素默认不溢出。
