响应式布局应基于一套语义化HTML，通过media查询配合display、flex-direction、order及CSS容器查询实现结构级适配，避免重复DOM或JS干预。
用 media 查询实现桌面和手机完全不同的布局结构，关键不是只改几个样式，而是从 HTML 结构设计之初就为「响应式重构」留出空间——允许在不同断点下通过 CSS 隐藏、重排、甚至视觉上“重建”布局。
结构上保持语义清晰，避免为某端硬编码
不要为了适配手机而写两套 HTML（比如一个 .desktop-nav + 一个 .mobile-menu），更不要用 JS 切换 DOM。理想做法是：一套语义化 HTML（如 , , ），靠 CSS 控制显示逻辑。
- 用
display: none / block / flex / grid在不同断点下控制元素显隐与流式行为 - 避免依赖浮动（
float）或绝对定位做主布局，改用 Flexbox 或 Grid —— 它们天然支持重排 - 例如导航栏：
，桌面横排，手机可转为垂直全宽 + 折叠按钮（仅用 CSS +模拟开关）
用 min-width 和 max-width 精准划分断点
推荐以「内容驱动」而非设备驱动设断点。常见组合：
Python v2.4 中文手册 chm
下载
Python v2.4版chm格式的中文手册，内容丰富全面，不但是一本手册，你完全可以把她作为一本Python的入门教程，教你如何使用Python解释器、流程控制、数据结构、模板、输入和输出、错误和异常、类和标准库详解等方面的知识技巧。同时后附的手册可以方便你的查询。
-
手机优先：默认写移动端样式，再用
@media (min-width: 768px)覆盖平板，@media (min-width: 1024px)覆盖桌面 -
反向也行：桌面默认，用
@media (max-width: 767px)专写手机样式（适合已有桌面站快速适配） - 关键：两个断点间不留空白区间，比如
max-width: 767px和min-width: 768px必须无缝衔接
用 display + flex-direction + order 实现视觉重排
CSS 的 order 属性配合 Flex 容器，能在不改 HTML 顺序的前提下调整子元素渲染顺序。这对「手机要底部放版权、桌面要侧边栏」这类需求极有用。
- 给容器设
display: flex; flex-direction: column;（手机竖排） - 桌面媒体查询中改为
flex-direction: row;，并用order调整模块先后（如让显示在右侧） - 示例：
.layout { display: flex; flex-direction: column; } .sidebar { order: 3; } @media (min-width: 1024px) { .layout { flex-direction: row; } .sidebar { order: 2; width: 300px; } }
必要时用 CSS 容器查询替代 viewport 媒体查询
如果某个组件（如卡片列表）需要“自己决定怎么排”，而不是整个页面统一响应，可用 CSS 容器查询（@container） —— 它基于父容器宽度，而非视口。需配合 container-type: inline-size 使用，现代浏览器已普遍支持（Chrome 105+, Safari 16.4+, Firefox 110+）。
- 比 viewport 查询更精准，避免“大屏手机显示桌面版、小屏笔记本却显示手机版”的错位
- 适用场景：组件库、CMS 中的可复用区块（如新闻卡片网格：容器宽
