viewport标签必须置于<head>最开头且仅含width=device-width和initial-scale=1.0，否则浏览器按980px默认渲染导致缩放抖动、媒体查询失效；它是响应式布局不可绕过的强制开关，缺一则所有CSS适配努力白费。
没加 <meta name="viewport"> 标签，其他所有响应式努力基本白费——这是最常被跳过的硬性前提。
为什么 viewport 标签必须放在 head 里且不能省略
移动端浏览器默认以约 980px 宽度渲染页面，不设 viewport 就等于让手机强行显示“桌面缩略图”，用户得双指放大才能看清文字。这个标签不是可选配置，是强制开关。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须写在<head>内，且只能出现一次 - 不要写成
width=1024或固定像素值，device-width才能匹配真实设备逻辑宽度 -
initial-scale=1.0防止 iOS Safari 自动缩放；若需禁用用户缩放，加user-scalable=no（但可访问性会受损）
媒体查询断点怎么设才不踩坑
断点不是按 iPhone/Android 型号硬编码的，而是按内容溢出临界点来定——比如某段文字在 768px 时开始换行难看，那就把 @media (max-width: 768px) 当作断点。
- 优先用
min-width而非max-width：移动优先写法更易维护，基础样式写小屏，再用@media (min-width: 768px)增强大屏 - 避免碎片化断点：常见三档够用——
768px（平板）、992px（小桌面）、1200px（大桌面），再多就难维护 - 别在媒体查询里重复定义全局样式，只覆盖需要变更的属性（比如只改
flex-direction，别重写整个.container）
Flexbox 和 Grid 在响应式中怎么选
一维排列（如导航栏、卡片列表）用 flex 更轻量；二维网格（如图文混排、仪表盘）直接上 grid，别硬套浮动或 inline-block。
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap是弹性容器的关键，配合flex: 1 1 300px让子项最小宽 300px，超出自动折行 -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))比手写@media更简洁，自动适配列数 - 注意
grid的兼容性：IE11 不支持现代语法，若需支持，降级用flex或加 postcss 插件
图片和字体怎么真正“响应”起来
max-width: 100% 只解决溢出问题，不解决加载性能和清晰度——响应式图片要兼顾尺寸、格式和 DPR。
- 图片：用
<picture>+<source>切不同尺寸/格式，srcset配合sizes属性让浏览器自主选择 - 字体：避免固定
px，用rem或clamp(1rem, 4vw, 1.5rem)实现流体缩放 - 背景图：
background-size: cover易裁剪关键内容，contain易留白，用object-position精控焦点区域
最常被忽略的其实是内容层级本身——再好的媒体查询也救不了堆砌在 HTML 里的冗余 <div> 和无意义的嵌套。结构松散，CSS 再聪明也得靠 hack 弥补。
