移动端优先是当前网络环境的事实性约束，全球移动端流量超58%，需确保320px下可读可点可滚动；默认样式必须写在无媒体查询的顶层css中，断点应基于内容拐点而非设备型号，流体单位和布局须从移动端基准起步。
移动端优先不是“更时髦的选择”，而是当前网络环境下的事实性约束：全球移动端流量占比已超58%，且多数用户首次访问来自小屏设备。这意味着，body 默认样式必须能在 320px 宽度下可读、可点、可滚动——否则首屏就失败。
移动端默认样式必须不依赖媒体查询
所有基础布局、字体、间距、按钮尺寸，都写在无 @media 包裹的顶层 CSS 中。一旦你把 .header 的 padding 写进 @media (min-width: 768px)，那在 iPhone SE 上它就是 0，内容紧贴边缘。
- 错误做法：
@media (min-width: 768px) { .btn { padding: 12px 24px; } }→ 移动端按钮没内边距，点击区域过小 - 正确做法：先定义
.btn { padding: 8px 16px; font-size: 14px; }，再用@media增强大屏体验 - 关键判断：如果删掉所有
@media规则后页面还能用，说明你真的移动优先了
断点应基于内容而非设备型号
写 @media (min-width: 768px) 不是因为 iPad 突然登场，而是因为当容器宽度撑到约 768px 时，两列卡片并排比堆叠更合理；@media (min-width: 1024px) 的触发点，往往是导航栏文字不再换行、侧边栏能稳定固定。
- 常见陷阱：用
max-width: 480px做“手机专属断点” → 实际上很多安卓小屏是 412px，而 iPhone 14 Pro 是 390px，硬切反而导致样式断裂 - 推荐方式：从最小容器开始测试，观察文字折行、图片挤压、按钮重叠等信号，再设断点
- 性能影响：断点越少、越贴近真实内容拐点，CSS 文件体积越小，首屏渲染越快
流体单位和 Flex/Grid 必须从移动端起步设计
rem、em、%、fr 这些单位本身不“响应”，它们只在有合理基准时才生效。移动端没有基准（比如根字号未设），1.5rem 就是无效值。
- 必须先写：
:root { font-size: 16px; }或用clamp()动态设定，再让所有font-size、padding基于它 -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))在 320px 屏幕上自动退化为单列，但前提是minmax()的下限 ≤ 当前视口宽度 - Flex 布局中
flex-wrap: wrap要默认开启，flex-basis避免写死像素 —— 否则小屏下子项直接溢出容器
真正难的不是写出能伸缩的 CSS，而是克制住给桌面端加阴影、悬停动画、多级菜单的冲动。那些功能必须藏在 @media 里，且只在必要时加载。否则你写的不是“响应式”，只是“一堆样式塞进一个文件”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
