viewport标签必须正确写在head最开头，内容为<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端渲染失效，后续所有响应式适配均无效。
viewport 标签没写对，其他都白搭
移动端浏览器默认以约 980px 宽度渲染页面，不设 viewport 就等于让手机显示“桌面缩略图”，用户得双指放大才能看清。这个标签不是可选配置，是强制开关。
必须写在 <head> 最开头、只出现一次，内容严格为：<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 别写成
width=1024或固定像素值 ——device-width才匹配设备逻辑宽度 -
initial-scale=1.0防止 iOS Safari 自动缩放；加user-scalable=no会损害可访问性，慎用 - 若漏掉或写错位置（比如塞在 CSS 后面），媒体查询可能完全失效，Flex/Grid 行为异常
Flexbox 和 Grid 的兼容性边界在哪
Flexbox 在 Chrome 29+/Firefox 28+/Safari 9+/Edge 12+ 均支持良好；Grid 在 Chrome 57+/Firefox 52+/Safari 10.1+/Edge 16+ 支持现代语法。但 IE11 是分水岭：
- IE11 支持旧版 Flexbox（
display: -ms-flexbox）和部分 Grid（仅display: -ms-grid，无repeat()、auto-fit等） - 若需兼容 IE11，Grid 必须降级：用 Flexbox 替代，或引入
postcss+autoprefixer+postcss-grid-kiss等插件补全 - 避免在关键布局中依赖
flex-wrap: wrap或grid-template-columns: repeat(auto-fit, ...)而不做 fallback —— 这些在低版本中直接被忽略，导致元素堆叠或溢出
媒体查询断点设置容易踩的坑
断点不是按 iPhone/Android 型号硬编码的，而是按内容溢出临界点来定。比如某段文字在 768px 时开始换行难看，那就把 @media (max-width: 768px) 当作断点。
立即学习“前端免费学习笔记（深入）”；
- 优先用
min-width（移动优先）：基础样式写小屏，再用@media (min-width: 768px)增强大屏，比max-width更易维护 - 常见三档够用：
768px（平板）、992px（小桌面）、1200px（大桌面）；再多断点会让 CSS 膨胀且难以追踪 - 别在媒体查询里重复定义全局样式 —— 只覆盖需要变更的属性，例如只改
flex-direction，别重写整个.container
图片和字体的响应式常被当成“次要问题”
max-width: 100% 只解决溢出，不解决加载性能和清晰度。真正响应式图片要兼顾尺寸、格式和设备像素比（DPR）。
- 图片：用
<picture>+<source>切不同尺寸/格式，srcset配合sizes让浏览器自主选择；纯img标签至少加height: auto - 字体：避免固定
px，用rem或clamp(1rem, 4vw, 1.5rem)实现流体缩放 ——clamp()在 Safari 13.1+/Chrome 88+ 支持，老版本需 fallback - 背景图：
background-size: cover易裁剪关键内容，contain易留白；用object-position或background-position精控焦点区域
最常被忽略的其实是 viewport 标签缺失或错误 —— 它不是“第一步”，而是“唯一前提”。所有后续适配，都建立在这个开关打开的基础上。
