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

Question

我遇到了一个令人沮丧的问题，即当在不同的屏幕分辨率下查看时，绝对定位的元素会移动。

我的元素是根据 body 元素的百分比定位的。使用百分比肯定会使元素保持在同一位置吗？

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

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

Answer 1

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

固定场景:给 body 元素一个固定的大小会产生一个固定的场景(用于定位元素的百分比总是相同的)，尽管比场景小的屏幕会丢失完整的事情。

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

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