CSS中如何使用百分比单位确保视口缩放时定位元素偏移不变？

本文共计726个文字，预计阅读时间需要3分钟。

视口缩放（例如 Ctrl++、鼠标滚轮、iOS 双指合拢）不会触发resize事件，也不会重排布局，但会改变设备像素和渲染尺寸的映射关系。相对于定位元素，如果依赖px值（例如：

用百分比替代 px 定位的实操要点

百分比定位本身不解决所有问题——它只对包含块（containing block）生效，且行为因定位方式而异：

• position: absolute 下，top/left 的百分比基于包含块的 内容区高度/宽度（不含 padding、border），不是视口
• 想锚定视口比例？得让包含块是 html 或 body，并确保它们撑满视口：html, body { height: 100%; margin: 0; }
• transform: translateX(10%) 的百分比基于元素自身宽高，和缩放无关，适合微调；但注意它不脱离文档流，可能影响其他元素布局

viewport meta 标签必须配齐

很多偏移问题其实卡在基础配置上。