极简响应式布局核心是viewport正确、容器用grid或flex、子项靠内容自然撑开；viewport标签必写且不能出错；grid应使用minmax()+auto-fit而非固定列数；导航动画需用max-height+overflow隐藏而非display:none。
极简响应式布局不是删代码，而是砍掉所有非必要干预点——结构不嵌套、CSS不冗余、断点不堆砌。核心就三件事：viewport 正确、容器用 grid 或 flex、子项靠内容自然撑开。
viewport 标签漏写或写错，小屏直接失效
这是 90% 新手第一步就翻车的地方。没有它，max-width: 100% 和媒体查询全白搭。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>里，且不能写成width=1200或漏掉initial-scale - 如果页面在 iOS Safari 里双指缩放失灵，大概率是
user-scalable=no被误加——别加，可访问性会崩 - 不要用
target-densitydpi（已废弃），它只在旧安卓浏览器里起作用，现代浏览器无视
grid-template-columns 写死 repeat(4, 1fr) 就不是响应式
所谓“响应”，不是屏幕变小后四栏挤成一条线，而是自动退化为两栏、再退为单栏。关键在 minmax() + auto-fit。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 错的写法：
grid-template-columns: repeat(4, 1fr)→ 小屏下文字换行、溢出、横向滚动 - 对的写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))→ 浏览器按最小 280px 宽度尝试塞列，塞不下就折行 - 280px 不是魔法数字：它是英文单词+图标+留白的常见最小舒适宽度；中文字体多的站点可设为 320px
- 别忘了加
gap: 1rem，它比手动算 margin 可靠，且不会触发 margin collapse
移动端导航收起时 display: none 会导致动画失效
想纯 CSS 实现点击展开菜单，display: none 是死路。它不可过渡，也不能被 :checked ~ 选择器触发显隐动画。
立即学习“前端免费学习笔记（深入）”；
- 必须用
max-height: 0+overflow: hidden控制隐藏态，展开时设max-height: 300px（数值略大于所有li高度和） - 触发机制必须用
input[type="checkbox"]+label，而不是 div 模拟按钮——JS 加载失败时，用户还能点开 -
ul展开后要加position: absolute，否则会撑开父容器高度，导致页面跳动 - 别给
li设固定width或height，它应随文字长度和行高自然撑开，否则窄屏下换行错位
真正难的不是写出能跑的代码，而是让 280px 宽度下的中文导航项不换行、让 checkbox 切换后焦点自动落到第一个链接、让 iOS 上的 position: sticky 导航不卡顿——这些细节不在语法里，在真实设备上反复点、滚、缩放才能暴露出来。
