单选控件小屏错位等问题的根源是默认流式布局、缺乏容器约束及未重置表单固有行为；须用.radio-group容器设flex+column，label设flex+align-items:center，横屏通过max-width、flex-basis和gap协同实现两列，触控优化靠label padding与for/id匹配，name值必须固定以保互斥逻辑。
单选控件（<input type="radio">）在小屏上堆叠错位、横排溢出、触控热区过小——根本原因不是“没写媒体查询”，而是默认流式布局 + 缺乏容器约束 + 未重置表单控件固有行为。
为什么 display: flex 直接套在 form 上会失效
浏览器对 form 元素没有强制的块级渲染规则，且部分旧版 Safari/Android WebView 会忽略 form 上的 display: flex。更关键的是：单选按钮本身是替换元素（replaced element），其尺寸和对齐受 line-height、vertical-align 和父容器 font-size 联合影响，单纯 flex 容器无法统一控制内部 label 与 input 的基线对齐。
- 必须用包裹容器（如
<div class="radio-group">）替代直接作用于 <code>form - 该容器需设
display: flex+flex-direction: column（移动端默认） - 每个选项项（
<label></label>）应设display: flex+align-items: center，避免input与文字上下偏移 - 禁用
label的默认display: inline，否则在 flex 容器中行为不可控 - 容器宽度必须有上限（如
max-width: 600px），否则即使屏幕变宽，容器仍撑满，无空间触发换行 - 每个
label需设固定宽度或flex-basis（如flex: 0 0 calc(50% - 0.5rem)），否则浏览器按内容宽度分配，长文本项会独占一行 -
gap值不能为 0；设gap: 0.75rem可确保列间留白，避免视觉粘连
flex-wrap: wrap 在横屏下不换行？检查这三个值
想让单选组在横屏时自动转为两列，只加 flex-wrap: wrap 不够。实际生效依赖三项协同：
示例断点写法：
@media (min-width: 768px) {
.radio-group { flex-direction: row; flex-wrap: wrap; max-width: 600px; }
.radio-group label { flex: 0 0 calc(50% - 0.75rem); }
.radio-group { gap: 0.75rem; }
}
触控区域太小导致误点？别只改 input 尺寸
直接给 <input type="radio"> 设 width/height 无效（它会被浏览器忽略）。真正可操作的是它的 label —— 点击 label 会自动聚焦/选中关联 input。
- 确保每个
label包含for属性且与input的id严格匹配 - 给
label设padding: 0.75rem 1rem，并添加cursor: pointer - 若需视觉上隐藏原生控件，用
position: absolute; opacity: 0，而非display: none（后者会破坏可访问性） - 对齐方式统一用
align-items: center，避免因字体行高差异造成点击偏移
最易被忽略的点：所有单选组必须共用同一个 name 值，否则横屏多列布局下互斥逻辑会断裂；而这个 name 值在响应式切换中不能动态变更，否则已选状态会丢失。
