纯CSS响应式标签页在移动端必然失败，应小屏用语义化联动静态HTML、大屏用水平tab；因radio方案存在可访问性缺陷，且select需name属性、value与面板id严格匹配。
直接说结论：纯 CSS 实现的响应式标签页（tabs）在移动端几乎必然失败——不是切换失效，就是焦点丢失、屏幕阅读器不可读、或 iOS Safari 里一滑就退出页面。真正能落地的方案，是小屏用 <select></select> 下拉 + 静态 HTML 结构联动，大屏才用水平 tab 按钮；不依赖 JS 就能保 SEO、可访问性、首屏可用性。
为什么纯 CSS 的 :checked + radio 标签页在移动端行不通
很多人抄来就用的 input[type="radio"] + :checked + 兄弟选择器方案，在真实移动端会立刻暴露三处硬伤：
-
input[type="radio"]默认不可见，若没加position: absolute; clip: rect(0 0 0 0);类隐藏方式，屏幕阅读器可能跳过整个控件 - 激活的
.tab-panel缺少aria-hidden="false"和tabindex="0"，键盘用户 Tab 过去就“掉进黑洞” - 点击
label后，焦点不会自动落到对应.tab-panel内容区，导致后续键盘操作中断
小屏下必须改用
关键不是“加个 media query 改样式”，而是结构级替换：小屏时完全隐藏水平导航，只留一个语义清晰、原生支持键盘和手势的 <select></select>。
- 每个
<option></option>的value必须严格匹配对应面板的id，例如<option value="panel-2">参数</option>→<div id="panel-2"></div> -
<select></select>必须有name属性（如name="tabs"），否则部分 Android 浏览器无法触发 change 事件 - 不要用 JS 动态生成
<option></option>—— 静态 HTML 才能保证无 JS 时内容仍可读、SEO 可抓取
示例片段：
<select class="tabs-select" name="tabs"> <option value="panel-1">简介</option> <option value="panel-2">参数</option> <option value="panel-3">评价</option> </select>
如何用 CSS 控制不同尺寸下的显示逻辑
核心是用媒体查询做“结构开关”，而不是强行缩放按钮：
立即学习“前端免费学习笔记（深入）”；
- 桌面端（
min-width: 768px）：显示.tab-nav，隐藏.tabs-select - 移动端（
max-width: 767px）：隐藏.tab-nav，显示.tabs-select，并确保.tab-panels > .tab-panel默认全部display: none - 必须给
.tabs-select加appearance: none和自定义背景箭头，否则原生下拉在 iOS 上高度不一致、点击热区窄
注意：别碰 flex-wrap: wrap 或 width: 100% 去“挤”水平 tab 按钮——按钮换行后对齐错乱、焦点顺序断裂、语义彻底丢失。
最易被忽略的一点：所有 tab 面板的 id 值，必须和 <option value></option>、label[for]、以及 JS 中可能用到的 document.getElementById() 三者完全一致；拼写差一个字母，小屏下切换就静默失败，且毫无报错提示。
