响应式布局需写全viewport三参数并置head顶部，Grid用auto-fit+minmax实现列数自适应，卡片尺寸用相对单位，断点只调布局/可见性/列数，按钮热区不小于44px。
光加 display: grid 或写死三列，手机上必然横向滚动或卡片挤压变形——这不是布局写错了，是没做响应式退化。
viewport meta 标签必须写全且放对位置
只写 <meta name="viewport" content="width=device-width"> 不够，iOS Safari 会先按 980px 渲染一次再重排，导致闪动或错位。必须包含三项核心参数，并放在 最顶部、所有 CSS <link> 之前：
-
width=device-width：让视口宽度等于设备物理宽度，不是默认桌面宽度 -
initial-scale=1.0：禁用加载后自动缩放，避免文字过小 -
user-scalable=no要慎用——它禁双指缩放，影响可访问性，仅限纯展示后台页
CSS Grid 卡片列数要能自动收缩为单列
硬编码 grid-template-columns: repeat(3, 1fr) 在手机上直接溢出。正确做法是用 auto-fit + minmax() 让浏览器按容器宽度自动算列数：
/* 手机到桌面通用写法 */
.card-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}说明：
立即学习“前端免费学习笔记（深入）”；
-
minmax(280px, 1fr)表示每列最小 280px（保证文字可读），最大占满可用空间 -
auto-fit会让空余列坍缩，窄屏下自然只剩 1 列；宽屏下自动铺开 2–4 列 - 别用
auto-fill——它会保留空列，导致卡片被拉宽变形
卡片自身尺寸不能依赖固定像素
卡片内容（如图片、标题）若用了 width: 300px 或 font-size: 16px，在小屏上就会撑破容器。必须全部转为相对单位：
- 图片统一加
max-width: 100%; height: auto;，不设固定width/height - 字体用
rem或em，比如font-size: 1.125rem（即 18px @ 16px root） - 内边距/外边距优先用
rem或vw，例如padding: 1rem 1.5rem，避免padding: 12px 24px - 卡片圆角、阴影等装饰属性可保留 px，但不影响布局流
媒体查询只补关键断点，别覆盖整套样式
很多人一写断点就从头重写字体、间距、颜色——没必要。真正需要干预的只有三类：
- 布局方向：比如桌面用
flex-direction: row，手机切column - 可见性：侧边栏、筛选器在手机上
display: none - 网格列数：当主内容区宽度
（≈768px）时，强制 <code>grid-template-columns: 1fr
注意：断点值应基于内容容器宽度（如 .main 的 max-width），而不是设备型号。平板横屏可能有 1200px 宽，但内容区只有 600px，这时就不该触发“手机样式”。
最常被忽略的是：卡片内部子元素（比如按钮、图标）的尺寸和点击热区。手机上 padding: 6px 12px 的按钮几乎点不中，至少要 padding: 12px 20px 并确保 min-height: 44px ——这是 iOS 可触控区域的最低推荐值。
