多终端共用样式核心是“移动优先+渐进增强”：先写通用基础样式（字体、颜色、间距等），再用min-width媒体查询按需覆盖布局、尺寸、显隐等差异，配合rem单位与clamp()提升弹性。
多终端共用样式，核心是“移动优先 + 渐进增强”：先写一套通用基础样式，再用媒体查询（@media）针对不同视口做精准调整，而不是为每个设备单独写整套CSS。
统一基础样式，避免重复劳动
把所有终端共有的规则（如字体、颜色、间距基准、按钮默认态、表单控件基础样式等）写在最前面。这些不依赖屏幕尺寸，也不加任何媒体查询。
- 用相对单位（
rem、em、%）代替固定px，提升缩放与适配弹性 - 设置合理的
font-size根字号（例如html { font-size: 16px; }），后续用rem统一调控 - 容器默认用
max-width+margin: 0 auto，不设死宽度，留出响应空间
用媒体查询按需覆盖细节
只在需要差异的地方加@media，且优先使用最小宽度断点（min-width），符合移动优先逻辑。
- 常见断点建议（根据项目实际微调）：
@media (min-width: 768px) { /* 平板 */ }@media (min-width: 1024px) { /* 小桌面 */ }@media (min-width: 1280px) { /* 大桌面 */ } - 只覆盖“变”的属性：比如手机端隐藏侧边栏，桌面端显示；手机用单列布局，桌面改双列；按钮内边距从
0.5rem增大到0.75rem - 避免在媒体查询里重复写基础样式（如颜色、字体族），专注布局、尺寸、显隐等响应行为
结构化组织CSS，便于维护
把媒体查询紧跟在对应的基础规则后面，或按模块分组（如“导航”、“卡片”、“表单”各自带自己的响应块），别全堆在文件底部。
立即学习“前端免费学习笔记（深入）”；
- 示例结构：
.card { padding: 1rem; border-radius: 4px; }@media (min-width: 768px) { .card { padding: 1.5rem; } }@media (min-width: 1024px) { .card { padding: 2rem; max-width: 600px; } }
补充：用现代特性简化判断（可选）
对于简单适配，可用clamp()替代部分媒体查询：
-
font-size: clamp(1rem, 2.5vw, 1.5rem);—— 字体在视口变化时平滑缩放 -
width: clamp(90%, 600px, 100%);—— 容器最小90%，最大100%，中间理想值600px - 注意兼容性：
clamp()在主流浏览器中已支持，但IE不支持，需按项目要求取舍
