真正起效的是修改固定宽度、像素字号、浮动或绝对定位三类硬编码；导航必须用nav+ul结构；断点应依内容折行实际像素确定，非照搬768px。
直接用现成模板不等于响应式能跑通，真正起效的是你改了哪几处关键 CSS 和 HTML 结构。绝大多数“响应式模板”开箱即崩，问题不在框架，而在你没动那三类硬编码：固定宽度、像素字号、浮动或绝对定位布局。
nav + ul 是唯一经得起键盘和屏幕阅读器检验的导航结构
别用 div 套 a 模拟菜单项——Tab 键顺序会乱，aria-current 失效，移动端点开后焦点丢失。必须用 nav 包 ul，每个菜单项是 li 里套 a，且 a 必须有真实 href（哪怕临时写 href="#"）。
-
li不设width或height，让它随文字自然撑开；设了就容易在小屏换行错位或文字溢出 - 移动端断点建议用
@media (max-width: 768px)，不是因为“768 是平板标准”，而是你的导航文字在 768px 宽度下刚好开始折行或拥挤 - 折叠菜单优先用
input[type="checkbox"] + label + ul实现无 JS 切换，避免 JS 失效时菜单永远关闭 - 展开态的
ul必须加position: absolute或position: fixed，否则会撑开父容器高度，导致页面滚动错位
grid-template-columns 要按内容密度重定义，不是抄断点数值
所谓“响应式 Grid”不是靠属性自动变，而是靠媒体查询重写 grid-template-columns。默认用 1fr 单列，中屏切 repeat(2, 1fr)，大屏切 repeat(3, 1fr)——但前提是你的内容真能在那个宽度下舒适排列。
- 别用
minmax(300px, 1fr)开头，维护成本高；先用纯1fr，等实际内容撑不开再加最小约束 - 所有子元素默认等高，不需要额外 hack；但若某栏内容极短，需加
align-items: start防止空白拉长 - 移动端必须强制单列，不能指望
flex-wrap: wrap自动折行——Grid 默认不换行，wrap是 Flexbox 的行为 - 如果主内容要 SEO 优先，用
.main { order: -1; }，别靠 DOM 顺序硬调
图片和表单是模板里最容易翻车的两个“硬骨头”
模板里的 img 和 form 往往自带固有尺寸逻辑，光靠 max-width: 100% 压不住。它们加载、缩放、触摸目标大小，全得单独处理。
立即学习“前端免费学习笔记（深入）”；
-
img必须配srcset和sizes，例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw">，否则小屏仍加载大图 - 表单字段别堆在
div里硬排，用display: grid定义grid-template-columns: 1fr，再在@media (min-width: 768px)里改成1fr 1fr - 按钮和输入框的
padding和height用rem或em，min-height: 2.5rem是触摸安全下限，px值在 iPhone 上可能只剩 12px 高 - 全局加
* { box-sizing: border-box; }，否则width: 30%+padding: 10px就超出了预期宽度
最常被忽略的一点：所有断点都不是“设备类型”决定的，是你盯着自己内容在浏览器里拖动窗口时，亲眼看到标题折行、按钮文字被截断、两栏间隙突然变大的那个像素值——它可能是 723px，也可能是 812px，抄来的 768px 只是个起点，不是终点。
