媒体查询需写在受影响样式之后，用min-width移动优先；百分比宽度依赖父容器明确宽度；图片表单需max-width:100%和box-sizing:border-box；viewport标签必不可少。
媒体查询怎么写才不会被忽略
浏览器会按顺序解析 CSS，后面定义的 @media 规则如果选择器权重相同，会覆盖前面的；但更关键的是，@media 必须放在它要影响的样式之后，否则可能不生效。比如把移动端规则写在桌面端样式前面，又没加 !important，那在大屏下就容易被覆盖。
常见错误是写成这样：
@media (max-width: 768px) {
.container { width: 100%; }
}
.container { width: 1200px; } /* 这里会覆盖上面的 100% */
正确顺序应该是：
.container { width: 1200px; }
@media (max-width: 768px) {
.container { width: 100%; }
}
- 用
min-width比max-width更易维护（移动优先），例如@media (min-width: 769px) - 避免嵌套媒体查询（CSS 不支持），所有
@media必须顶层书写 - 别依赖设备像素比（
device-pixel-ratio）做布局判断，它和响应式无关，只影响图片渲染
百分比宽度为什么有时不按预期缩放
百分比是相对于父容器计算的，不是视口。如果父元素没有明确宽度（比如 div 默认是 display: block，但高度/宽度依赖内容），那子元素的 width: 50% 就可能失效或表现奇怪。
立即学习“前端免费学习笔记（深入）”；
典型场景：
- 父容器是
position: absolute且没设left/right，它的宽度会坍缩，子元素百分比就失去参照 - 浮动元素未清除，导致父容器高度塌陷，进而影响百分比计算基准
- 使用
flex或grid布局时，百分比行为可能被容器的主轴/交叉轴策略覆盖
稳妥做法是确保链路上至少一层有明确宽度约束，比如：
.wrapper {
width: 100vw; /* 或 max-width: 100% 配合 padding */
}
.column {
width: 50%; /* 现在有明确参照 */
}
如何让图片和表单控件也响应式
光靠容器百分比不够， 这类替换元素默认有固有尺寸，会撑开布局。
必须显式重置：
-
img加max-width: 100%; height: auto;—— 否则在小屏下溢出 -
input、textarea、select要设width: 100%; box-sizing: border-box;，否则padding和border会让实际宽度超父容器 - 避免对
img单独设width: 100%（不加max-width），否则高清图在大屏下会被强制拉伸失真
示例：
img.responsive {
max-width: 100%;
height: auto;
}
form input,
form textarea {
width: 100%;
box-sizing: border-box;
}
viewport meta 标签漏掉会怎样
没有 ，移动端 Safari、Chrome 会以约 980px 的虚拟视口渲染页面，@media (max-width: 768px) 根本不会触发——你写的响应式代码全白搭。
这个标签必须放在 内，且不能写错属性名（比如写成 viewpoint 或漏掉 =）。
-
width=device-width让视口宽度 = 设备物理宽度（非像素，是 CSS 像素） - 不要加
user-scalable=no，它会影响可访问性，且现代 WCAG 推荐允许缩放 - 如果项目需兼容 iOS Safari 旧版本，可加
shrink-to-fit=no（仅 Safari 9–12）
复杂点在于：某些 CMS 或框架会自动注入 viewport，但可能和你手动写的冲突，最终只生效一个。建议检查渲染后的 HTML 源码确认是否唯一且正确。
