优先使用 aspect-ratio: 1 / 1 实现正方形按钮，现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）原生支持；旧版 Safari 等不支持时，通过 relative + padding-top: 100% wrapper 配合 absolute 定位降级实现。
用 aspect-ratio 最直接，但得看浏览器支持情况
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）原生支持 aspect-ratio，一行 CSS 就能锁死正方形：
.add-to-cart {
aspect-ratio: 1 / 1;
}
不需要额外 wrapper，也不依赖 padding hack。但如果你的用户里还有大量旧版 Safari（比如 iOS 14 或更早），这个属性会被忽略，按钮会塌成默认宽高——得准备降级方案。
兼容旧浏览器：用 padding-top 百分比实现正方形容器
原理是利用「块级元素的 padding 百分比始终相对于父容器宽度计算」这一特性。必须把按钮包进一个相对定位的 wrapper，再用绝对定位撑满：
<div class="btn-wrapper"> <button class="add-to-cart">加入购物车</button> </div>
.btn-wrapper 设为相对定位 + padding-top: 100%，再把按钮绝对定位并拉伸填满：
.btn-wrapper {
position: relative;
width: 100%;
padding-top: 100%; /* 关键：高度 = 宽度 */
}
.add-to-cart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
- 注意：wrapper 必须有明确宽度（比如
width: 200px或继承父级），否则padding-top: 100%没意义 - 按钮内文字多时可能换行溢出，建议加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 如果按钮需要响应式缩放，wrapper 的宽度要用
vw或max-width控制，不能只靠百分比
用 grid 或 flex 配合 min-height 不可靠
有人试过给按钮设 display: grid 再用 min-height: 100%，或者用 flex + align-items: stretch，但这些方式都依赖父容器高度——而按钮本身通常不继承高度，父容器又常常是 height: auto，结果就是失效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
min-height不会反向约束宽度，无法保证正方形 -
flex主轴尺寸由内容决定，交叉轴拉伸的前提是父容器有明确高度 - 除非你同时控制父容器宽高相等（比如用
aspect-ratio套在父容器上），否则这类布局方案本质是绕远路
JavaScript 动态同步宽高容易引发重排
用 JS 监听 resize、读取 offsetWidth、再设 style.height 看似灵活，但实际很危险：
- 每次 resize 触发时，读宽 → 写高 → 浏览器重排 → 可能触发下一次 resize，形成微循环
- 移动端频繁触发 resize（比如横竖屏切换、虚拟键盘弹出），卡顿明显
- 服务端渲染（SSR）或首屏直出时，JS 还没执行，按钮先以错误比例渲染一帧，肉眼可见“闪一下”
除非你用 ResizeObserver + 节流 + requestAnimationFrame 包装，否则不推荐。真要动态适配，优先用 CSS 方案。
最稳妥的做法是：用 aspect-ratio 作为主方案，再用 @supports 降级到 padding hack。别为了省几行 CSS 冒然引入 JS 同步逻辑——正方形按钮的“稳”，远比“看起来聪明”重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
