最稳定可维护的响应式方案是用@media媒体查询控制显隐或重置样式，而非两套规则互相覆盖；移动端需先写基础样式并显式定义，桌面端用min-width包裹，图片用srcset/sizes或背景图切换，且必须声明viewport。
直接用 @media 媒体查询控制显隐或重置样式，而不是写两套规则再互相覆盖——这是最稳定、可维护性最强的做法。
移动端默认样式必须显式定义
很多人以为“不写移动端样式就自动适配”，其实不是。浏览器会继承桌面端 CSS 规则（比如 position: absolute、width: 300px），导致小屏布局错乱。正确做法是：先写移动端基础样式，确保它在所有设备上都生效。
- 把
position设为static，避免父级或全局样式意外继承absolute - 用
width: 100%或max-width: 100%替代固定像素值 - 移除
margin-left、top、left等依赖视口偏移的属性 - 文字大小优先用
rem或em，而非固定px
桌面端样式必须用 min-width 包裹
用 @media (min-width: 768px) 或 @media (min-width: 1024px) 来包裹桌面专属样式，确保它们只在大屏生效。别用 max-width 反向覆盖，容易因层叠顺序出错而失效。
-
min-width: 768px覆盖平板横屏和桌面，min-width: 1024px更偏向纯桌面场景 - 断点值建议与设计稿一致，不要硬套“通用值”——比如你项目里导航栏在 920px 才开始横向排列，就该用
920px - 避免嵌套多层
@media，同一元素的响应式逻辑尽量集中在一个媒体查询块里
两套 DOM 结构时，靠 display 切换而非 visibility
如果桌面版和移动端需要完全不同的 HTML 结构（比如导航栏含下拉菜单 vs 汉堡菜单），推荐直接写两套节点，用 display: none / display: flex 控制显隐。这是语义清晰、无障碍友好、且不依赖 JS 的方案。
立即学习“前端免费学习笔记（深入）”；
- 默认让桌面结构可见，移动端结构
display: none - 在
@media (max-width: 768px)中反转：桌面结构display: none，移动端结构设为display: block或display: flex - 绝对不要用
visibility: hidden—— 它仍占文档流空间，且读屏器可能播报隐藏内容 - 两套结构中相同功能的按钮（如“下载 App”）必须保持
href或交互逻辑一致
图片和背景图切换要走对路径
CSS 不能改 <img> 的 src，所以 LOGO 或 Banner 图片不能靠媒体查询切换地址；但背景图可以，且更可控。
-
<img>必须用srcset+sizes实现响应式加载，例如：<img src="logo-small.png" srcset="logo-320w.png 320w, logo-768w.png 768w" sizes="(max-width: 767px) 100vw, 200px"> - 背景图直接在媒体查询里换
background-image，比如桌面用竖构图，移动端换横构图 - 高清屏补充
@media (-webkit-min-device-pixel-ratio: 2)加载 @2x 图，或用image-set() - 始终设
background-size: cover和background-repeat: no-repeat，避免拉伸或平铺
真正容易被忽略的是：viewport 声明缺失会导致媒体查询在移动端完全不触发，以及 flex 方向切换后没重置 height 或 align-items，造成文字截断或垂直居中失效。
