必须添加viewport meta标签，否则媒体查询因视口默认980px而失效；正确使用max-width而非max-device-width；统一设置box-sizing: border-box避免百分比宽度溢出；flex/grid优先级高于百分比，推荐用现代布局替代复杂媒体查询。
媒体查询怎么写才不被手机忽略
很多页面在手机上还是显示桌面版，根本原因是 @media 查询没匹配到真实设备宽度。关键不是“手机”或“平板”这种模糊概念，而是浏览器视口的 width 值。必须加这行 ，否则 iOS Safari 和部分安卓浏览器会默认按 980px 渲染，@media (max-width: 768px) 就永远不生效。
常见错误写法：@media screen and (max-device-width: 768px) —— 这是查设备物理屏幕，不是视口，现代响应式不用它。正确用 max-width（基于当前渲染容器宽度）。
推荐断点（单位全用 px，避免 em 或 rem 引入额外缩放干扰）：
-
@media (max-width: 480px)：窄屏手机（如 iPhone SE） -
@media (min-width: 481px) and (max-width: 768px)：常规手机横屏 + 小平板竖屏 -
@media (min-width: 769px) and (max-width: 1024px)：主流平板（iPad 竖/横屏都覆盖）
百分比宽度为什么有时撑不满父容器
用 width: 100% 很容易以为“肯定填满”，但实际受盒模型影响：如果元素有 padding、border 或 margin，又没设 box-sizing: border-box，那 100% 只算内容区，总宽就超了父容器，导致横向滚动或换行错乱。
立即学习“前端免费学习笔记（深入）”；
解决方式统一加：
*, *::before, *::after {
box-sizing: border-box;
}另外注意：百分比是相对于**包含块（containing block）** 的宽度计算的。如果父元素没设宽度（比如 div 默认 display: block），那它的宽度由内容撑开，子元素 width: 50% 就可能意外变小。稳妥做法是给直接父容器明确设 width: 100% 或确保它是块级且无浮动/绝对定位。
媒体查询 + 百分比混用时的典型冲突
最常踩的坑：在大屏用固定像素（如 width: 300px），切到小屏后只改文字大小，但忘了把宽度也切回百分比，结果卡片堆成一列却还保持 300px 宽，在 375px 屏幕上溢出。
正确思路是——所有宽度相关属性（width、max-width、padding、margin）都要在对应媒体查询里重置，不能只调一个。
示例（避免左右留白过大）：
.card {
width: 90%;
margin: 0 auto;
}
@media (min-width: 769px) {
.card {
width: 600px; /* 固定宽度只在平板及以上生效 */
margin: 0 auto;
}
}
@media (min-width: 1025px) {
.card {
width: 800px;
}
}注意：不要在同一个选择器里同时写 width: 100% 和 max-width: 600px 却不包在媒体查询里——这样小屏也会受 max-width 限制，反而卡住伸展。
flex/grid 与百分比谁优先级更高
当同时用 display: flex 和子项 width: 50%，实际表现取决于 flex-basis。默认 flex-basis: auto 会优先取 width 值；但如果写了 flex: 1 或 flex: 0 1 50%，那 width 就被忽略。
所以别混用：要么全用 flex 控制比例（flex: 0 0 50%），要么全用百分比 + float 或 inline-block（已不推荐）。现代布局建议直接用 flex 或 grid，放弃百分比宽度做主干结构——它更适合内部微调（比如按钮内边距、图片最大宽度）。
例如响应式栅格，用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 比写七八个 @media 更简洁稳定。
真正难处理的是嵌套百分比 + 多层媒体查询 + 字体缩放叠加，这时候得靠 clamp() 或 JS 监听 resize 补救，但日常项目中，老实用对 box-sizing 和断点范围，已经能覆盖 95% 场景。
