viewport meta标签必须添加且正确书写，最简有效写法为<meta name="viewport" content="width=device-width, initial-scale=1.0">，禁用width=375或user-scalable=no等错误写法。
viewport meta 标签必须加，且不能写错
移动端页面不显示为响应式，十有八九是漏了或写错了 <meta name="viewport">。它不是可选配置，而是浏览器渲染布局的开关。
- 最简但有效的写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 禁止写成
width=375或user-scalable=no（后者会禁用双指缩放，影响可访问性） - 如果用了
maximum-scale=1.0，iOS Safari 会强制禁用字体放大，导致低视力用户无法调整文字大小
用 rem 或 viewport 单位替代 px，但别混用
px 在高 DPR 屏幕（如 iPhone）上会模糊，而 rem 和 vw/vh 才是适配核心。但二者机制不同，混用容易失控。
-
rem依赖根元素font-size动态计算，适合做等比缩放（比如整个 UI 按屏幕宽等比缩小） -
vw是视口宽度百分比，100vw = 屏幕宽度，适合做全宽容器或响应式字号（如font-size: 4.8vw） - 避免同时用
rem设定容器宽 +vw设定内部文字大小——它们缩放节奏不一致，小屏下文字可能溢出
图片和媒体查询要配合 srcset 和 media
只写一个 <img src="a.jpg">，在 2x/3x 屏上必然模糊；只靠 CSS max-width: 100% 也不能解决带宽浪费问题。
- 用
srcset+sizes让浏览器自主选择资源：<img src="a-320w.jpg" srcset="a-320w.jpg 320w, a-768w.jpg 768w, a-1200w.jpg 1200w" sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1100px" alt="">
- CSS 媒体查询优先用
min-width而非max-width，避免覆盖冲突（例如@media (min-width: 768px)更易维护） - 慎用
device-pixel-ratio媒体查询，现代浏览器已基本靠srcset和image-set()自动处理
flex 和 grid 的断点行为必须显式控制
写了 display: flex 不代表自动适配；flex-wrap: wrap 也不等于“小屏就换行”。很多布局错乱，是因为没设断点下的 flex-basis 或 grid-template-columns。
立即学习“前端免费学习笔记（深入）”；
- 移动端优先：默认设单列
flex-direction: column，大屏再用@media (min-width: 768px)改为row - 用
flex: 0 0 auto防止子项被压缩变形（尤其含图片或固定尺寸组件时） - Grid 布局中，
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))比死写1fr 1fr更可靠
viewport 的 initial-scale 和图片的 sizes 属性——前者一错全盘失焦，后者一漏加载又慢又糊。 
