必须加 <meta name="viewport">，否则移动端永远按 980px 宽度渲染，文字小到无法阅读——这不是“建议”，是硬性前提。
viewport 标签写错就全盘失效
它不是可选项，而是浏览器渲染的开关。不加或写错，@media 规则根本不会触发，max-width: 100% 也救不回来。
-
content必须同时包含width=device-width和initial-scale=1.0，缺一不可 - 不能只写
width=device-width：Android Chrome 某些版本会强制缩放，布局偏移 - 禁止加
user-scalable=no或maximum-scale=1.0：违反 WCAG 可访问性要求，iOS 13+ 已部分忽略，且对视障用户构成障碍 - 必须放在
最顶部，不能等 JS 加载完再动态插入
媒体查询要用 min-width 自下而上增强
写 @media (min-width: 768px) 而不是 @media (max-width: 767px)，不是为了“看起来高级”，是为避免样式覆盖混乱和体积膨胀。
- 移动优先意味着基础样式写在常规 CSS 中，只给大屏“加”规则，而非给小屏“删”规则
-
@media (max-width: 480px)和@media (max-width: 767px)容易互相覆盖，调试时难定位 - 典型断点按内容定，不是设备型号：比如容器宽度撑到 750px 才需调整布局，那就用
min-width: 750px - 服务端分离 CSS 或构建时提取关键样式时，
min-width逻辑更清晰、可预测
图片必须用 srcset + sizes，不能只靠 max-width
max-width: 100% 只解决溢出，不解决加载——高清屏加载小图会模糊，小屏加载大图浪费带宽。
-
srcset告诉浏览器“我有这些尺寸的图”，例如img.jpg 400w, img@2x.jpg 800w -
sizes告诉浏览器“这张图在当前页面里大概占多宽”，例如sizes="(max-width: 768px) 100vw, 750px"，缺了它srcset就退化成随机选图 - 不要只用
<picture></picture>切格式（如 webp / avif）：它不解决分辨率适配，srcset才是核心 - 手动维护多套图不现实，Webpack/Vite 插件或 CI 脚本应自动生成 2x/3x/400w/800w 等尺寸
Flex/Grid 在老 Android 上会突然不换行
Android 4.4 及更早 WebView 对 flex-wrap: wrap、flex-basis、gap 支持极差，不是“偶尔失效”，是稳定 Bug。
-
if ('flexWrap' in document.documentElement.style)检测完全不可靠，必须实机测试或 UA 特征检测 - Grid 在该环境基本不可用，别尝试降级 fallback，直接换方案
- 简单布局可用
display: inline-block+vertical-align: top+ 百分比宽度兜底 - 复杂卡片流推荐用 JS 控制列数（如每行 2 个 or 1 个），比依赖 CSS 行为更可控
最常被跳过的其实是 sizes 属性和 min-width 媒体查询方向——它们不显眼，但一旦漏掉，适配就在用户看不见的地方悄悄崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
