绝对定位元素的width/height百分比无效，因其参照的是最近定位祖先而非父元素；若祖先无明确尺寸，百分比计算结果常为0。
绝对定位元素用 width 和 height 百分比为什么没效果？
因为百分比宽高是相对于**包含块（containing block）**计算的，而绝对定位元素的包含块默认是最近的「定位祖先」（即 position 为 relative、absolute 或 fixed 的祖先），不是父元素本身。如果祖先没设宽高，百分比就失去参照，结果常是 0。
- 确保定位祖先（比如父容器）有明确的
width和height，哪怕用100vh或max-width配合aspect-ratio - 避免把绝对定位元素直接丢进
body或无尺寸限制的div里——那它的包含块可能是视口，但视口高度不总等于你预期的“内容区”高度 - 用
devtools检查该元素的「computed」宽高，确认百分比是否真的被解析成了非零值
真正可靠的等比缩放：用 transform: scale() 配合固定基准尺寸
想让一个绝对定位的图标或弹窗随容器缩放又保持比例，scale() 比纯百分比宽高更可控——它不改变文档流，也不依赖包含块尺寸，只作用于自身渲染。
-
scale()的基准是元素自身的原始尺寸（即未加 transform 前的宽高），所以先得给元素设一个确定的初始大小，比如width: 100px; height: 100px; - 配合 JS 动态算缩放系数：比如容器宽度从 800px 缩到 400px，就
scale(0.5)；也可用 CSS 自定义属性 +calc()实现响应式缩放 - 注意
transform会改变元素的视觉位置，若需居中，别只靠top: 50%; left: 50%，要补transform: translate(-50%, -50%) scale(0.8)，否则缩放中心偏移
用 aspect-ratio 锁定宽高比，再结合百分比控制大小
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio，它能让元素在任意宽度下自动推导高度，是实现等比缩放最干净的 CSS 方案。
- 对绝对定位元素，先设
aspect-ratio: 16 / 9，再设width: 80%，高度就自动匹配，无需 JS 或 hack - 如果需要兼容老浏览器，可用伪元素 padding-bottom hack，但必须确保父容器是相对定位且有明确宽度
-
aspect-ratio和transform: scale()可共存：前者保形，后者控整体缩放粒度，适合做响应式 UI 组件
缩放后点击区域/文字模糊？那是 scale() 引起的像素对齐问题
scale(0.75) 这类非整数缩放会让浏览器在渲染时做亚像素插值，导致边缘发虚、文字锯齿、点击热区偏移——尤其在高 DPI 屏幕上更明显。
- 优先使用整数缩放（
scale(0.5)、scale(2)），或限定缩放系数为0.25的整数倍（如0.75、1.25） - 加
image-rendering: pixelated对图片有效，但对文字和 SVG 无效；文字模糊可尝试-webkit-font-smoothing: antialiased - 真要精细控制，不如放弃缩放，改用媒体查询切换不同尺寸的预设类名，比如
.icon--sm、.icon--lg
实际项目里，aspect-ratio + 百分比宽 + transform: scale() 微调，是最平衡的组合。但一旦涉及动画或频繁 resize，JS 计算缩放比反而更稳——CSS 的声明式缩放看着简洁，边界条件一多，就容易漏掉定位偏移、焦点错位、打印样式失效这些细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
