局部组件不响应主因是固定尺寸和硬编码结构；必须保留nav+ul+li语义结构，子菜单须为li直接子ul，禁用div套JS控制，改用checkbox+label模拟开关，图片配srcset/sizes，表单用grid布局，按钮输入框触摸目标≥40px。
局部组件不响应，不是模板问题，是你没动它默认的固定尺寸和硬编码结构。 常见现象是导航栏在手机上挤成一排看不见文字、卡片错位、表单字段太小点不准——这些都不是“整体布局没做响应式”，而是局部模块自己卡死了。
nav+ul+li结构必须保留，不能用div硬套
HTML 本身不响应，但语义结构决定 CSS 能不能精准控制。nav 标签告诉浏览器“这是主导航”，ul 表示逻辑并列组，li 必须直接包裹 a；否则屏幕阅读器无法播报“共 6 个菜单项”，键盘 Tab 顺序也会乱。
- 下拉菜单必须写成
li > ul（子菜单是对应 li 的直接子元素），写成平级或外置会导致移动端展开后定位偏移 - 别用
div class="menu"配 JS 控制显隐——JS 加载失败时菜单永远不可见；改用input[type="checkbox"]+label模拟开关更可靠 -
ul.nav-menu默认设max-height: 0; overflow: hidden;，而不是display: none，否则 CSS 过渡动画失效
图片和表单这类“硬骨头”必须单独处理
它们自带固有尺寸逻辑，max-width: 100% 只能解决溢出，解决不了加载性能和触摸体验。
- 图片必须配
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) { grid-template-columns: 1fr 1fr; } - 按钮和输入框的
height、padding用rem或em，确保小屏触摸目标 ≥ 2.5rem（约 40px）
Flex/Grid 中的 gap、flex-basis、断点值不能照搬
很多模板写死 flex: 1 1 300px 或 gap: 1rem，但在窄屏下 300px 已撑满，gap 又让内容被挤出视口。
立即学习“前端免费学习笔记（深入）”；
-
flex-basis改用min(300px, 100%)或minmax(min-content, 1fr)，避免强制最小宽度导致换行失败 -
gap在 IE11 不支持，得退回到margin-right并加li:not(:last-child)限定 - 断点别抄 Bootstrap 的 768px——打开 DevTools 拖动窗口，盯着你的标题何时折行、卡片何时出现明显间隙，那个像素值才是你该用的断点
最常被忽略的是：局部组件的响应式不是加功能，是解耦尺寸绑定。删掉所有 width: 960px、font-size: 16px、padding: 10px 这类固定值，换成相对单位+媒体查询分段调控，组件才真正活起来。
