移动优先 CSS 通过先写移动端基础样式、再用媒体查询渐进增强，减少重复代码；统一用 CSS 自定义属性管理可变值，结构化命名断点，并集中处理同一断点下的多组件调整。
用移动优先组织 CSS，能大幅减少重复代码。核心思路是：先写移动端基础样式，再用 @media 逐步增强，而不是为每个断点从头写一遍。
只在需要时覆盖，不重复定义默认行为
很多重复源于在每个断点里都重写相同属性。比如文字大小、内边距、颜色等，在移动端已设好合理默认值，PC端若无需改动，就完全不用再写。
- 把通用样式（如字体、按钮基础状态、表单控件）写在最前面，不套媒体查询
- 只对「布局结构变化」或「视觉层级调整」加媒体查询，例如：
flex-direction: column → row、display: block → grid - 避免这样写：
@media (min-width: 768px) { .card { padding: 1rem; font-size: 1rem; } }<br>@media (min-width: 1024px) { .card { padding: 1.5rem; font-size: 1.1rem; } }
而应写成：.card { padding: 1rem; font-size: 1rem; }<br>@media (min-width: 1024px) { .card { padding: 1.5rem; font-size: 1.1rem; } }
用 CSS 自定义属性统一可变值
间距、字体比例、断点阈值这些常变的值，抽成 :root 变量，媒体查询里只改变量，不重复写整套规则。
- 例如定义：
:root { --spacing-sm: 0.5rem; --spacing-md: 1rem; --breakpoint-md: 768px; } - 然后在媒体查询中切换：
@media (min-width: var(--breakpoint-md)) { :root { --spacing-md: 1.5rem; } } - 组件直接用
padding: var(--spacing-md)，无需每个类重复写数值
结构化断点，按内容而非设备命名
别用 mobile / tablet / desktop 这类易过时的名称。按容器或内容实际需要的最小宽度来设断点，让媒体查询更稳定、复用性更高。
立即学习“前端免费学习笔记（深入）”；
- 推荐命名：
--breakpoint-content-narrow、--breakpoint-content-medium - 一个断点可被多个组件共用，比如导航栏和文章卡片都在
768px切换布局，就只写一次查询，里面包含所有相关调整 - 避免为同一逻辑写多遍：
@media (min-width: 768px) { .nav { display: flex; } }<br>@media (min-width: 768px) { .article-card { display: grid; } }
改为集中写：@media (min-width: 768px) { .nav { display: flex; } .article-card { display: grid; } }
用现代布局特性减少条件样式
Flexbox 和 Grid 天然支持响应式行为，很多过去靠媒体查询实现的“换行”“分栏”，现在用一行属性就能解决。
-
flex-wrap: wrap让子项自动折行，省去小屏/大屏两套flex-direction -
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))实现自适应列数，无需手动写多个断点 -
aspect-ratio+max-width控制图片/卡片比例，比在每个断点里调height更简洁
