在不同的分辨率下将绝对定位的元素保持在相同的位置

Question

我正面临一个令人沮丧的问题，即在不同的屏幕分辨率上查看时绝对定位的元素会移动。

我的元素以相对于 body 元素的百分比定位。确定使用百分比会使元素保持在相同的位置吗？

我的页面：http://www.superfreebingo.com/advent-landing/

如何使用绝对定位但在不同分辨率下将元素保持在同一位置？

Answer 1

问题是一个图形场景，就像您尝试构建的场景一样，需要让每个元素都处于给定的坐标位置才能使其具有视觉意义，因此取决于您想要什么：

固定场景：为 body 元素提供固定大小将导致固定场景（用于定位元素的百分比将始终相同），尽管比场景更小的屏幕会丢失关于完整的事情。

响应式场景：由于每个元素都必须具有给定的相对坐标，因此仅使用水平或垂直定位是没有用的，因为它们只占坐标的两个数字之一。此外，您还必须考虑图像大小，因为平板电脑需要看到的场景比台式机更小。

这很棘手但并非不可能，我建议您从固定场景开始，然后尝试为其添加响应性，或者使用 JS 计算场景大小（宽度始终为 100%，高度必须计算）或“transform: scale(...)”css 属性。