width: 20vw + height: 20vw 不够用，因其仅依赖视口宽度、无视高度限制和最大可用空间，在大屏易溢出、横竖屏切换时比例突变；vmin 单位（如 width: 30vmin; height: 30vmin）可天然适配宽高最小值，确保正方形安全缩放。
不能只设 width: 20vw 再配 height: 20vw —— 这在竖屏小屏上会溢出视口，且无法响应“最大可用空间”约束。
为什么 width: 20vw + height: 20vw 不够用
它确实能生成正方形，但问题在于：这个正方形的尺寸只和视口宽度挂钩，完全无视高度限制。比如在 iPhone SE（375×812）上，20vw = 75px，卡片高 75px 没问题；但在折叠屏展开态（如 2280×1920），20vw = 456px，若父容器 max-width 只有 400px，卡片就会撑破布局。更糟的是，它不感知“当前设备哪边更短”，导致横竖屏切换时比例突变。
- 只依赖
vw→ 卡片尺寸随屏幕变宽而线性增大，但内容区未必需要这么大 - 没做上限控制 → 容易突破设计稿约定的最大宽度（如 750px 设计稿对应
max-width: 100vw在大屏上远超预期） - 忽略竖屏主导场景 → 很多移动端用户以竖屏为主，用
vh锚定反而更稳，但又不能只用vh
用 vmin 替代 vw 是最简解
vmin 是视口宽高中较小值的 1%，天然适配横/竖屏切换。对正方形卡片，它直接给出“安全最大边长”：
.card {
width: 30vmin;
height: 30vmin;
background: #f0f0f0;
}
- 在 iPhone 14 Pro（390×844）竖屏下：
vmin = 390px→ 卡片边长 =117px - 横屏下：
vmin = 844px？错，横屏时视口变成 844×390，vmin = 390px不变 → 卡片仍为117px，视觉稳定 - 搭配
max-width: 200px可进一步兜底，防止在桌面端过大
需要兼容 iOS 14 或安卓 WebView 时怎么办
这些环境不支持 vmin（Safari 15.4+ 才开始支持），得退回 padding-bottom 技术栈，但要注意两个关键点：
- 必须设
height: 0，否则 padding-bottom 不生效 - 子元素要用
position: absolute填满，否则内容会把容器撑高破坏比例 - 若需
max-width生效，别写在容器上——写在绝对定位的子元素里
.card-wrapper {
width: 30%;
height: 0;
padding-bottom: 30%;
position: relative;
}
.card-content {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
max-width: 200px; /* 这里加才有效 */
margin: auto;
}
别忽略字体和边框的缩放副作用
用 vmin 后整个卡片等比缩放，但 font-size: 16px、border: 1px solid 也会被压缩。小屏下 1px 可能渲染成 0.5px，发虚；12px 字体缩到 8px 难以阅读。
- 给文字单独加
min-font-size: 14px（Chrome 125+ 支持）或用媒体查询兜底 - 边框建议改用
border: 0.08vmin solid，让它随卡片同比例变化，再补min-width: 1px - 阴影同理：
box-shadow: 0 2px 8px rgba(0,0,0,0.1)→ 改成box-shadow: 0 0.1vmin 0.4vmin rgba(0,0,0,0.1)
真正难的不是让卡片变正方形，而是让它在各种屏幕下都“看起来合理”：不溢出、不模糊、文字可读、边框清晰。vmin 是起点，不是终点；缩放逻辑必须和内容层级、渲染精度、兼容边界一起算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
