viewport meta标签必须放在中且参数正确，否则响应式失效；background-image需配background-size和background-color；全屏居中用flex更稳；响应式背景图应避免仅靠media query切换地址。
viewport meta 标签必须放在 里且参数不能错
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，其他所有响应式手段都白搭——浏览器默认按 980px 渲染，再精细的 @media 规则也压不住这个“自动缩放”。
常见错误现象：
- 页面在手机上显示极小、需手动缩放才能阅读
- 调试器里拖动宽度，样式完全不响应
- 桌面端正常，移动端所有
@media都没触发
关键细节：
- 必须写在
中，不能塞进或注释后 -
width=device-width是硬性要求，写成width=375或漏掉都会失效 - 别加
user-scalable=no，这会锁死双击放大，iOS Safari 在某些版本下还会让maximum-scale失效
background-image 要配 background-size 才算真正布局
单独设 background-image 只是加载图片，不指定尺寸和定位，浏览器默认按原始大小平铺（background-repeat: repeat），根本谈不上“布局”。
常用 background-size 值及效果：
-
cover：等比缩放填满容器，可能裁剪边缘 -
contain：等比缩放完整显示整张图，可能留白 -
100% 100%：强行拉伸铺满，会变形 -
auto 100%：高度固定，宽度按比例自适应（常用于全高侧边栏背景）
必须加 background-color 作为降级底色，防止图片加载失败或禁用时空白。
全屏背景 + 内容居中排版用 flex 最稳
别用 position: absolute + top: 50% + transform: translateY(-50%) 模拟居中——它依赖父容器有明确高度，而响应式场景下高度常为 auto，容易错位或截断。
推荐写法：
section {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-color: #222;
}
注意点：
-
min-height: 100vh比height: 100vh更安全，避免内容超出时被截 - 子元素若含长文本或 URL，记得加
min-width: 0配合overflow: hidden防撑破容器 - 如果要兼容 IE11，
flex是唯一可靠选择；Grid 在 IE11 中即使加前缀也不稳定
响应式背景图别只靠 media query 切换地址
仅用 @media 改 background-image: url() 会导致小屏设备仍下载大图——浏览器已提前解析 CSS，不管是否命中媒体查询都会发起请求。
更务实的做法：
- 每个断点下的图片都经过压缩，且宽高比一致（否则
background-size: cover行为会突变） - 优先用
<picture></picture>+<img>替代 CSS 背景，尤其需要 art direction（如横竖构图切换）时 - Webpack/Vite 用户可尝试
image-set()，但注意目前仅 Safari 和 Chrome 111+ 支持
最易忽略的一点：深色模式下，background-blend-mode 叠加颜色可能意外变黑——系统切深色时若未同步改 background-color，混合结果可能发灰甚至死黑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
