viewport标签写错会导致媒体查询失效，必须用置于head中；断点应基于内容临界点（如换行、挤压）而非设备尺寸，统一用max-width并避免空隙。
viewport 标签没写对，媒体查询就不起作用——这是最常被忽略的硬性前提。
必须先写对 <meta name="viewport">
很多页面在手机上文字小得看不清、按钮点不中，根本不是 CSS 写错了，而是 <meta> 标签缺失或写成 width=1200、user-scalable=no 这类禁用缩放的配置。
正确写法只有一条，且必须放在 里：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width让页面宽度等于设备视口宽度，不是物理像素 -
initial-scale=1.0确保加载时不缩放，否则媒体查询断点判断会失准 - 别加
maximum-scale或user-scalable，iOS Safari 下它们会直接破坏双击放大和可访问性
@media (max-width: ...) 断点怎么选？
断点不是抄 iPhone 屏幕尺寸（比如 375px），而是盯住内容什么时候“开始难看”：卡片换行、文字挤成两行、图标间距崩坏——这些才是真实断点。
常见且实用的断点值（按内容响应而非设备）：
-
@media (max-width: 768px)：导航栏文字开始折行，或三列卡片被迫变成两列 -
@media (max-width: 620px)：图标按钮文字重叠、点击区域过小（48px 高度在小屏下已不够） -
@media (max-width: 420px)：单列布局更安全，padding和font-size需进一步压缩
注意：所有断点统一用 max-width，避免用 min-width 导致覆盖遗漏；断点之间不要留空隙，让样式能自然降级。
按钮尺寸缩放别只调 width/height
纯用像素固定宽高（如 width: 155px; height: 48px）在小屏下必然溢出或交互失效。真正可用的缩放逻辑是：
- 用相对单位：
font-size改用rem，padding用em或rem - 设置最小交互尺寸：
min-height: 44px（苹果人机指南推荐最小点击高度） - 配合
box-sizing: border-box，确保padding不撑大总尺寸 - 慎用
transform: scale()：它只缩放视觉，不改变布局占位，适合悬停反馈，但不能替代真实尺寸适配
示例（基础按钮 + 小屏适配）：
.btn {<br> font-size: 1.125rem;<br> padding: 0.75rem 1.5rem;<br> min-height: 44px;<br> box-sizing: border-box;<br>}<br>@media (max-width: 620px) {<br> .btn {<br> font-size: 1rem;<br> padding: 0.5rem 1rem;<br> }<br>}
为什么用 Flex/Grid 比 float 更可靠？
原始代码用 float 布局图标按钮，小屏下极易错位、清除浮动失效、响应式断点失效——这不是媒体查询的问题，是布局模型本身不支持流式收缩。
现代方案直接用 display: flex 或 display: grid：
-
flex-wrap: wrap让按钮自动换行，不用手动计算每行几个 -
gap控制间距，媒体查询里只需改一个值，不用重复写margin -
flex-basis可设为百分比（如flex-basis: 33%），比固定像素更易随窗口缩放
复杂点在于：Flex/Grid 的缩放效果依赖父容器宽度，而父容器又依赖 viewport 和断点设置——漏掉任意一环，缩放就断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
