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

Question

在不同的屏幕分辨率下观看绝对定位元素时，我遇到了令人沮丧的问题。

我的元素以身体元素的百分比定位。当然使用百分比会使元素处于相同的位置？

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

如何使用绝对定位但是将元素保存在不同分辨率的相同位置？

Answer 1

问题是一个图形场景，就像你正在尝试建立的场景需要让每个元素在一个给定的坐标上使它具有视觉意义，所以取决于你想要的：

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

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

这很棘手，但并非不可能，我建议你从一个固定的场景开始，然后尝试添加响应，使用JS来计算场景大小（宽度总是100％，高度必须计算）或者“transform：scale（...）”css属性。