按钮应设width: 100%、max-width: 480px、padding: 12px 20px并配合box-sizing: border-box防溢出；字号用clamp(14px, 4vw, 18px)适配屏幕；min-height: 44px加padding扩点击区；底部留safe-area-inset-bottom安全距。
按钮宽度撑满手机视口但保留内边距
直接写 width: 100% 容易让按钮贴到屏幕边缘，实际需要的是「内容区占满，但有安全间距」。用 max-width + padding 组合更可控：
.add-to-cart {
width: 100%;
max-width: 480px; /* 防止在大屏平板上过宽 */
padding: 12px 20px;
box-sizing: border-box;
}注意必须加 box-sizing: border-box，否则 padding 会额外增加总宽度，导致横向滚动条。
文字不换行又不溢出的响应式字号
手机小屏上「加入购物车」六个字容易折成两行或撑破按钮。别用固定 font-size，改用 clamp()：
.add-to-cart {
font-size: clamp(14px, 4vw, 18px);
}这个写法的意思是：最小 14px、最大 18px、中间按视口宽度 4% 线性缩放。实测在 iPhone SE（375px）显示约 15px，在 iPhone 14 Pro Max（430px）显示约 17px，刚好可读又不挤。
点击区域太小导致误操作
移动端最小触控目标建议 ≥44×44px，但按钮本身可能只有 36px 高。解决方案不是拉高按钮，而是扩大可点击范围：
.add-to-cart {
min-height: 44px;
padding-top: 14px;
padding-bottom: 14px;
}这样视觉高度还是 36px（12px 内边距 + 12px 行高），但上下各多出 2px 可触区域，符合 WCAG 标准。另外务必确认没写 touch-action: manipulation —— 这个属性在某些安卓浏览器里会禁用双击缩放，反而影响体验。
按钮被底部导航栏遮挡的常见场景
很多电商页用 position: fixed 做底部导航，而购物车按钮放在页面最下方时会被盖住。解决方式不是调 z-index，而是给按钮父容器加安全距离：
.cart-section {
padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}同时确保该容器没有 overflow: hidden，否则 iOS 的 env(safe-area-inset-bottom) 不生效。如果项目还没适配刘海屏，这个值至少设成 80px 保底。
实际调试时最容易漏掉的是 viewport meta 标签是否正确——没有 width=device-width, initial-scale=1，上面所有 CSS 都白搭。另外 Safari 对 clamp() 支持从 iOS 14.5 开始，老版本需 fallback。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
