viewport meta 标签必须置于 <head> 最前且含 width=device-width，否则移动端强制按980px渲染，所有媒体查询失效；响应式应以 min-width 递进、按实际内容断点设置，Grid/Flex 回退需保上下文，表格须加父容器约束并分场景处理。
viewport meta 标签写错位置或参数，所有响应式都白搭
没加 <meta name="viewport" content="width=device-width, initial-scale=1">，或者把它塞进 <body> 里，页面在手机上就会按 980px 宽度渲染——哪怕你写了十层 @media 也压不住这个默认缩放。
常见错误现象包括：页面在手机上显示极小、需双指放大才能阅读；开发者工具里拖动宽度，样式完全不响应；桌面端正常，移动端所有媒体查询都不触发。
-
width=device-width是硬性要求，写成width=375或漏掉直接失效 - 别加
user-scalable=no，iOS Safari 某些版本下会让maximum-scale失效，还锁死双击放大，伤害可访问性 - 必须放在
<head>最靠前的位置，不能被注释、<script>或其他 meta 标签挡住
媒体查询用 min-width 递进，别堆 max-width
基础样式（小屏）直接写，不包 @media；大屏增强规则用 @media (min-width: 768px) 往上叠加。这样逻辑线性、覆盖可控，不会出现“写了 @media (max-width: 767px) 却忘了重置 display”这种翻车。
断点别抄模板数字。打开浏览器开发者工具的响应式模式，拖动窗口宽度，观察内容何时开始挤、换行、文字难读——记下那个像素值（比如 624px），再取整为 640px 这类好维护的数。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
@media (max-width: 767px)和@media (min-width: 768px)并列写，缩放 110% 的 iPad 可能卡在中间缝隙里，两边都不命中 - 在
@media里改了布局但漏掉--color-primary这类自定义属性，视觉上像“没生效” - 靠反复
display: none/block切换元素来“模拟换内容”，破坏语义与 SEO
Grid 和 Flexbox 布局中，移动端回退要保上下文
现代项目无脑用 grid：三栏结构直接写 grid-template-columns: 200px 1fr 200px，gap 控制间距比 margin 更稳。移动端必须用 @media (max-width: 768px) 改成 grid-template-columns: 1fr，让三栏垂直堆叠——别用 display: block 覆盖，那会破坏 Grid 上下文。
如果要兼容 IE11：gap 得回退写成 grid-column-gap 和 grid-row-gap；用 flex-direction: column 切竖排前，先给子项设 flex: none; width: 100%，否则 flex: 1 会继续拉伸导致高度失控。
- 全局加
* { box-sizing: border-box; }，否则width: 200px + padding: 10px实际占 220px，三栏直接错位 - 栅格类只管尺寸，
padding和margin往里包一层<div class="sec">，别混在容器上 - Flexbox 中
flex-basis: 300px配合@media (max-width: 600px) { flex-basis: 100% }是更安全的回退方式，比单纯改width稳定
表格响应式不能只靠 width: 100%
单纯给 <table> 加 width: 100% 在移动端大概率溢出。真正有效的做法是分场景处理：
- 列少、内容短：用
table-layout: fixed+word-wrap: break-word防止长文本撑破 - 列多、非核心字段多：给辅助列加
.hide-on-mobile类，用@media (max-width: 768px) { .hide-on-mobile { display: none; } }隐藏 - 报表类、数据密集型：把每行
<tr>拆成独立卡片，用display: grid或flex重构为“字段名: 值”的纵向结构，这才是移动端可读性保障
最常被忽略的一点：表格的父容器本身得有明确宽度约束（比如 max-width: 100% 或 overflow-x: auto），否则 width: 100% 就没意义——这点在嵌套布局里尤其容易漏。
