购物车按钮在平板上点不中、文字糊成一团或被挤出屏幕，主因是响应式断层：viewport缺失、点击区无保底、flex容器挤压、媒体查询错用max-width误判平板尺寸。
购物车按钮在平板上点不中、文字糊成一团、或者被挤到屏幕外——根本不是按钮本身写得不对，而是它卡在了响应式断层里。 viewport 缺失、点击区没保底、Flex 容器挤压、媒体查询用 max-width 错判平板尺寸，这四点占了 90% 的问题。
viewport 标签必须放在 maximum-scale=1.0
没有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，iOS 和 Android 浏览器默认以约 980px 渲染页面，@media 规则压根不触发，按钮自然按桌面尺寸渲染。常见错误包括：
- 标签写在所有
<link rel="stylesheet">之后，旧版 Safari 直接忽略 - 加了
maximum-scale=1.0或user-scalable=no，导致双击缩放失效，48px 点击区在高 DPR 屏幕上物理尺寸缩水 - 用 JS 动态插入该标签，时机晚于首次渲染，样式已错乱
验证方式：Chrome DevTools 切换 iPad Pro 模拟器，Elements 面板里看 <meta name="viewport"> 是否存在，且右上角显示的 viewport width 应为 1024（横屏）或 768（竖屏），不是 980。
按钮点击区必须硬性满足 min-width: 48px 和 min-height: 48px
“适配平板”不是让按钮变大，而是守住最小可触控物理尺寸底线。用 px 写死宽高在高 DPR 设备上会失效；单纯靠 @media (max-width: 768px) 加 padding 是漏网之鱼——Surface Pro 竖屏是 820px，它既不进手机断点也不进桌面断点。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 优先用
min-width: max(48px, 15%);，兼顾绝对值和相对占比 - 对图标类按钮（如
<button><svg></svg></button>），用padding扩展点击区，而不是只调width/height - 避免父容器设
flex: 1或grid-template-columns: 1fr 1fr后，子按钮被压缩到 30px 宽——必须给按钮自身加min-width - 真机测试时，用指尖实际点，别只靠鼠标模拟
平板断点别用 @media (max-width: 768px)，改用 min-width 渐进增强
把平板当“大号手机”处理，是导致侧边栏消失、文字过小、三列卡片强行堆叠的核心原因。iPad Air 竖屏是 820px，很多安卓平板竖屏超 900px，它们全被 max-width: 768px 漏掉了。
- 基础样式（手机）不写媒体查询，直接设
width: 100%、font-size: 1rem、padding: 0.75rem - 平板起始断点用
@media (min-width: 768px)，处理竖屏 iPad、大屏安卓平板 - 再加一层
@media (min-width: 1024px)处理横屏平板和小桌面，比如让购物车按钮从底部固定浮层改为右上角常驻 - 断点值不要抄设备列表，拖动浏览器窗口，观察按钮文字何时开始换行、图标是否清晰、间距是否突兀，那个宽度就是你的断点
Flex 布局中按钮容易被 flex-basis 和 flex-shrink 挤扁
用 flex: 0 0 33.33% 排三个按钮，在平板横屏下留白严重；用 flex: 1 又可能把按钮压成一条线。关键不在“怎么分”，而在“保底不塌”。
- 推荐写法：
.cart-btn { flex: 1 1 200px; min-width: 120px; }—— 允许拉伸收缩，基础宽度 200px，最小不小于 120px（确保 48px × 48px 物理尺寸） - 避免对按钮设
transform: scale(1.2)，视觉放大但点击区不变 - 若按钮在
display: grid容器中，用min-inline-size: 48px替代width，更符合逻辑流向 - 用
gap控制按钮间距，别用margin，负 margin 会吞掉点击响应区域
最常被忽略的是：按钮文字用 font-size: 0.875rem 时，即使容器有 48px 高，文字撑不开行高，实际点击热区仍不足。务必检查 computed styles 中的 height 和 line-height 是否真实 ≥ 48px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
