响应式布局失效的根源是漏掉<meta name="viewport">标签，必须写为<meta name="viewport" content="width=device-width, initial-scale=1.0">并置于<head>中。
漏掉 <meta name="viewport"> 就别谈响应式
几乎所有移动端布局失效的根源，都是没加这行标签。浏览器默认以桌面宽度（通常 980px）渲染页面，导致小屏上内容被缩成一团、文字看不清、按钮点不准。<meta name="viewport" content="width=device-width, initial-scale=1.0"> 必须放在 <head> 里，且不能写错属性名或值。常见错误包括：content 拼成 contnet、漏掉 initial-scale=1.0、或误用 user-scalable=no（禁用缩放会损害可访问性）。
@media 查询必须配合移动优先写法
很多人写媒体查询只在大屏加样式，结果小屏反而继承一堆不适用的桌面规则。正确做法是：先写基础样式（针对 320–480px），再用 @media (min-width: 768px) 增强中屏，最后 @media (min-width: 1200px) 处理桌面。避免用 @media (max-width: 767px) 反向覆盖——它容易遗漏边界情况，且维护成本高。关键点：
- 断点数值不是固定标准，应基于内容溢出实际发生的位置调整，而非套用“手机/平板/桌面”教条
- 字体大小、内边距、网格列数这些属性，要逐级递增，而不是突然跳变
- 慎用
vw/vh：比如width: 100vw在 iOS Safari 中可能因地址栏隐藏/显示导致视口宽度抖动
Grid 和 Flexbox 的 flex-basis 与 grid-template-columns 别硬设像素
用 grid-template-columns: repeat(4, 250px) 或 flex: 0 0 300px 看似整齐，但一到小屏就直接溢出。替代方案：
- 用
minmax(300px, 1fr)替代固定列宽，让 Grid 自动压缩最小列宽并均分剩余空间 - Flex 项改用
flex: 1 1 100%+min-width: 0防止内容撑开容器 - 对图片和卡片类元素，统一加
max-width: 100%和height: auto，否则img标签会按原始尺寸强行占位
表格在移动端不是“不能响应式”，而是要用 table-layout: fixed
默认表格在小屏上横向滚动、文字挤成一团，本质是浏览器按内容自动计算列宽。解决方法很明确：
立即学习“前端免费学习笔记（深入）”；
- 给
<table>加table-layout: fixed和width: 100% - 第一行
<th>或<td>显式设width（推荐百分比，如width: 20%） - 强制换行：
word-break: break-word或overflow-wrap: break-word，避免长英文单词撑破列 - 小屏下可考虑用
@media把表格转为卡片流：display: block+ 伪元素模拟表头，但仅限数据量少时
真正卡住人的往往不是技术不会用，而是把“响应式”当成一套开关去打开——它其实是整套约束条件下的持续权衡：字体不能太小但也不能太大，留白不能太少但也不能浪费屏幕，动画不能卡顿但又要足够反馈。每加一个断点，就要多测三台真机；每换一种布局模式，就得重验所有交互路径。
