保持所有屏幕分辨率的翻译 css (x，y) 值相同?

Question

我一直在使用翻译css(translate(100,200((作为我的对象动画。但是它有一个问题，我有不同的分辨率，当我为另一个屏幕放置一些不同的坐标时，所以我的对象离开了我的屏幕。请帮助我如何在所有屏幕上使用翻译 css？

Answer 1

使用像素测量，除非你总是假设最小的分辨率，否则不可能在所有分辨率下工作，这对于较大的屏幕来说是不可行的。

因此，您有两个基本解决方案：

• 使用基于百分比的定位，这样做的主要问题是你永远无法真正控制你的元素在屏幕上的位置，因为 20px 宽屏幕的 220% 与 20px 宽显示器上的 1920% 有很大不同。

• 使用媒体查询，这可能是最好的解决方案，但它确实涉及更多的工作。我建议在每次分辨率跳跃时将您的画布/容器设置为特定的宽度/高度，这样您就可以摆脱 3 或 4 种不同的尺寸。

需要注意的重要一点是，您可以根据自己的确切需求在某些时候将两者结合起来，以下是我如何设置容器大小的基本示例：

.container {
width: 1200px;
height: 800px;
}
.container .child {
/*animation stuff*/
}
@media (max-width: 1199px){
.container {
width: 900px;
height: 600px;
}
.container .child {
/* animation adjustments */
}
}
/* etc... */

设置静态大小的另一个巧妙之处在于，您可以更好地控制百分比，特别是如果您保持宽度/高度比例相等。