必须用 transform: scale()，别碰 width 和 height；前者实现文字、边框、阴影、圆角等整体等比缩放，不触发重排、不影响布局流，后者仅调整盒模型尺寸，导致内容挤压变形、比例失调、视觉失真。
卡片整体缩放该用 transform: scale() 还是改 width/height？
必须用 transform: scale()，别碰 width 和 height。前者是真缩放：文字、边框、阴影、圆角、内边距全部等比变化，不触发重排，不影响 Flex/Grid 布局流；后者只是盒模型尺寸调整，会导致卡片内容挤压变形、文字与边框比例失调、border-radius 看起来过厚或过薄。
常见错误现象：width: 60% 后卡片变窄，但阴影没缩、字体大小没变，视觉上“瘦了但胖着”；height: 120px 强制定高后，封面图被裁或留白，破坏原始比例。
-
transform: scale(0.85)配合transform-origin: top left（避免缩放后偏移） - 外层容器必须设
overflow-x: auto（否则缩放后右侧内容被裁） - 缩放元素自身加
width: fit-content（防止它仍按原始宽度占位） - Windows 下 Chrome/Edge 显示模糊？补一句
transform: translateZ(0)强制 GPU 加速
缩放时怎么保持卡片宽高比不拉伸？
靠 aspect-ratio，不是靠 max-width + max-height。后者只设上限，不定义关系；前者直接声明“宽高必须是 250/380”，浏览器自动算高度——哪怕父容器宽度变成 100px，高度也会是 152px（100 × 380 / 250）。
典型误配：width: 100%; height: 200px; → 宽度随屏变，高度钉死，比例崩；max-width: 250px; max-height: 380px; → 小屏下宽高各自缩，结果仍是压扁的矩形。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给卡片容器（如
.card）加aspect-ratio: 250 / 380 - 同时设
width: 100%（让宽度响应父容器）和overflow: hidden（防子图溢出破比例） - 封面图用
img { width: 100%; height: auto; display: block; }，不写固定height - 旧浏览器兼容？用
padding-bottom技法替代：height: 0; padding-bottom: 152%（380 ÷ 250 ≈ 152%）
缩放动画为什么 hover 一下就跳变，不平滑？
因为 transform 初始值没声明，浏览器从 none 插值到 scale(1.2)，导致跳变或卡顿。
关键点不在动画时长，而在状态对齐：基础样式里必须显式写 transform: scale(1)，hover 才能平滑过渡到 scale(1.2)。
- 基础样式中加
transform: scale(1); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); - hover 状态写完整值：
transform: scale(1.2) translateZ(0);（translateZ(0)防止 iOS 模糊） - 别写
transition: scale 0.3s—— 必须是transform，不是子属性 - 如果卡片是
inline元素（比如没设display），先加display: block或inline-block
缩放后文字太小看不清，能单独调大吗？
不能单独放大文字。一旦这么干，就破坏了“等比缩放”的前提：边框会变细、阴影会变淡、圆角会变尖锐，整个卡片失去视觉一致性。
真正要解决的是缩放系数本身是否合理。桌面端推荐 scale(0.85)，小屏降到 scale(0.75)，再低就不适合阅读了；如果文字已到临界值（如 font-size: 12px 缩完剩 9px），说明原始设计尺寸偏小，该返工的是卡片基准尺寸，不是打补丁调文字。
容易被忽略的是：缩放效果是否稳定，80% 取决于父容器的尺寸逻辑是否自洽，而不是在卡片上堆多少行 CSS。检查三层：容器有没有 max-width，子容器是否用百分比继承，卡片自身是否还挂着固定 width 或 height。
