横屏下按钮文字被截断需用clamp()设font-size、calc()设padding、允许换行；定位改用flex/grid；保障min-width/min-height≥44px并加touch-action: manipulation；图标优先用svg。
按钮文字在横屏下被截断怎么办
横屏时按钮宽度变大但高度压缩，font-size若用固定px或未配合vh/clamp()，文字极易溢出或撑破容器。根本原因不是按钮本身，而是视口高度骤降导致行高、内边距、字体失去比例基准。
解决思路是放弃“按钮宽高固定”，改用相对单位+视口约束：
-
font-size用clamp(14px, 4.266667vw, 18px)（注意：iOS Safari 10以下不支持vw设font-size，需加JS fallback） - 按钮
padding改用calc(0.5vh + 0.5em)，避免纯rem在横屏下过小 - 禁用
white-space: nowrap，允许文字换行；搭配line-height: 1.2防重叠
横竖屏切换时按钮位置错乱
常见于用position: absolute或transform: translate()硬定位的按钮——横屏后window.innerHeight突变，但定位值没重算，导致按钮飞出可视区。
必须让按钮布局脱离“绝对坐标依赖”：
- 优先用
flex或grid布局容器包裹按钮，靠justify-content/align-items居中，而非top/left - 若必须绝对定位，监听
resize事件并重算坐标：window.addEventListener('resize', () => { btn.style.top = window.innerHeight * 0.7 + 'px'; }) - 避免在
@media (orientation: landscape)里只调width不调height，横屏高度常不足，按钮会被挤到屏幕外
点击区域在横屏下变小或失效
真机测试常发现横屏时按钮点不中，尤其在iPad或折叠屏上。这不是样式问题，而是touch-action和min-width/min-height缺失导致的触控热区塌陷。
移动端点击区域有最低物理要求（Apple建议44×44pt，Android建议48×48dp），需显式保障：
- 按钮
min-width和min-height至少设为44px，用min-inline-size: 44px兼容新语法 - 加
touch-action: manipulation，告诉浏览器此元素只用于点击，提升响应速度 - 避免父容器设
overflow: hidden且按钮靠近边缘——横屏后按钮部分被裁切，热区实际消失
横屏时按钮图标变形或模糊
用background-image或<img>做图标的按钮，在横屏缩放后常出现拉伸、像素化。本质是图像未适配DPR变化或未提供多倍图。
关键不是换图，而是控制渲染逻辑：
- 图标用
inline SVG替代位图，width/height设为1em，天然矢量缩放 - 若必须用PNG，提供
@2x版本，并用image-set()或srcset：background-image: image-set(url(icon@1x.png) 1x, url(icon@2x.png) 2x); - 禁止对图标元素设
transform: scale()——横屏时DPR叠加缩放会导致双重模糊
横竖屏适配按钮，最难的不是写多少CSS，而是意识到：按钮不是孤立元素，它受视口尺寸、DPR、触摸热区、字体渲染链共同制约。漏掉任一环，真机上就可能点不中、看不清、位置飘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
