媒体查询必须写在顶层规则中，不能嵌套在CSS声明块内；需配合viewport meta标签、max-width约束图片表单、合理设置断点（推荐min-width），才能使固定宽度布局真正响应式。
媒体查询写在固定宽度容器内部根本不起作用
固定宽度布局（比如 width: 1200px）本身会阻止内容随视口缩放，此时把 @media 查询写在该容器的 CSS 规则里，比如 .container { width: 1200px; @media (max-width: 768px) { width: 100%; } }，浏览器直接忽略——CSS 不支持嵌套媒体查询（除非用 Sass/Less 等预处理器，但编译后仍是平级规则）。
正确做法是让媒体查询与选择器并列：
.container {
width: 1200px;
}
@media (max-width: 768px) {
.container {
width: 100%;
padding: 0 16px;
}
}
- 媒体查询必须作用于顶层规则，不能嵌套在声明块中
- 固定宽度元素的响应式改造，本质是「在不同断点下切换它的尺寸行为」，不是「让它自己判断」
- 如果用 CSS-in-JS 或框架（如 Tailwind），需确认其是否自动提升媒体查询层级；原生 CSS 永远要手动平铺
viewport meta 标签缺失导致媒体查询完全失效
在移动端，@media (max-width: 768px) 匹配的是 视口宽度（viewport width），不是设备物理宽度。没有 ，iOS Safari 和 Android Chrome 默认以 980px 宽度渲染页面，所有 max-width: 768px 查询都会不触发。
常见错误现象：PC 上调试正常，手机打开页面始终显示桌面版样式。
立即学习“前端免费学习笔记（深入）”；
- 该
标签必须放在中，且不能被 JS 动态插入（部分浏览器不识别） -
initial-scale=1防止双击缩放干扰断点判断；去掉它可能导致视口临时缩放，使媒体查询错位 - 不要写成
width=1200或user-scalable=no——前者锁定宽度过死，后者破坏可访问性
固定宽度布局中图片和表单控件溢出容器
即使 这不是媒体查询没生效，而是响应式「连锁约束」没跟上： input,
textarea,
select {
width: 100%;
box-sizing: border-box;
} 媒体查询的 标准做法是用「移动优先」或「桌面优先」统一方向： 固定宽度布局做响应式，核心不是「加媒体查询」，而是「解除宽度刚性依赖」——从容器、图片、表单到字体大小，每一层都要检查是否在断点切换后仍能自适应。最容易被忽略的是：viewport meta 标签缺失、图片未设 .container 在小屏下设为 width: 100%，内部未约束尺寸的 或
仍可能突破父容器，造成水平滚动或遮挡。img,
video,
iframe,
table {
max-width: 100%;
height: auto;
}
max-width: 100% 比 width: 100% 更安全：它允许图片在大屏下保持原尺寸，只在窄屏时收缩box-sizing: border-box 必须显式设置，否则 padding 和 border 会让表单控件实际宽度超 100%img 直接写 width: 100%——拉伸失真；优先用 max-width + height: auto
断点值选 768px 还是 767px？像素边界容易踩坑
max-width: 768px 匹配视口宽度 ≤ 768px 的设备，而 min-width: 769px 才开始匹配更大屏幕。如果两个断点相邻写成 max-width: 768px 和 min-width: 768px，768px 宽度会同时命中两者，造成样式冲突。/* 移动优先：基础样式默认小屏，逐步增强 */
.container {
width: 100%;
}
@media (min-width: 769px) {
.container { width: 1200px; }
}
@media (min-width: 1200px) {
.container { width: 1440px; }
}
min-width 断点，避免 max-width 堆叠时的边界重叠问题responsive 模式拖动宽度，实时观察哪个像素值开始折行或拥挤，再定断点max-width、以及断点之间留了像素缝隙。
