多条件筛选页面响应式布局的核心是筛选控件随视口收缩、重组、降级，且需在HTML结构层预留语义化分组和可折叠锚点；推荐用fieldset+legend包裹筛选区，配合CSS Grid动态列数、按钮行为降级及真机验证视觉反馈。
直接说结论：多条件筛选页面的响应式布局，核心不是“怎么堆样式”，而是“筛选控件如何随视口收缩、重组、降级”，且必须在 HTML 结构层就预留语义化分组和可折叠锚点。
为什么用 fieldset + legend 包裹筛选区
很多开发者直接用 div 套一堆 select 和 input，结果在小屏上要么横向溢出，要么按钮错位。而 fieldset 天然支持语义分组、键盘聚焦跳转、屏幕阅读器识别，更重要的是——它能被 CSS 的 display: grid 或 flex 安全包裹，不会破坏表单语义。配合 legend 作为筛选区标题，还能在折叠时保留可读性。
- 不推荐：
<div class="filter-group"> <label>价格</label><input type="range"> </div> - 推荐：
<fieldset> <legend>价格范围</legend> <input type="range" name="price"> </fieldset> - 移动端 JS 折叠时，
legend可作为展开/收起按钮文案，无需额外span
select 和 input[type="checkbox"] 在小屏下的排列策略
桌面端习惯横排多个筛选项（如“菜系”“人均”“营业状态”），但手机上必须垂直堆叠，且要避免用户反复滚动才能看到全部控件。关键在于：不靠媒体查询硬切布局，而用 CSS Grid 的 auto-fit + minmax 动态列数控制。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 给筛选容器设：
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))); - 240px 是手机竖屏下保证单个
select文字不换行的最小安全宽度；超过 768px 自动转为两列，1024px 以上三列 -
checkbox组别必须用fieldset包裹，并设margin-bottom: 0.75rem，否则小屏下选项间距塌陷、误触率飙升 - 禁用
float或绝对定位来“微调位置”——它们在 flex/grid 环境中极易失效且不可预测
筛选按钮在不同断点下的行为差异
“重置”和“应用”按钮不能简单地用 display: none 隐藏。小屏下用户更倾向“边选边看”，所以“应用”按钮应常驻底部吸底，而“重置”需降级为图标按钮（<button type="button" aria-label="重置筛选"><svg>...</svg></button>）并紧贴“应用”右侧，节省空间。
立即学习“前端免费学习笔记（深入）”；
- 桌面端：两个按钮并排，宽度均分，文字完整显示
- 平板（768–1023px）：“重置”文字缩为“重置”，“应用”保持原宽，按钮间加
gap: 0.5rem - 手机（≤767px）：“重置”仅留图标 +
aria-label，按钮改为垂直堆叠，“应用”固定在视口底部（position: sticky; bottom: 0;） - 注意：所有按钮必须设
type="button"，防止意外触发表单提交刷新页面
真正容易被忽略的，是筛选状态的视觉反馈——比如某个 select 已选中但未触发“应用”，它的边框色、背景色、右侧箭头图标是否在小屏下依然可辨？这些细节不靠设计稿标注，得在真机上逐个点开看。尤其是 iOS Safari 中，select 的原生下拉菜单会遮挡页面其他区域，此时“已选中值”的显示必须足够醒目，否则用户根本不知道自己刚才点了什么。
