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

Question

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

Answer 1

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

所以你有两个基本的解决方案：

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

• 使用媒体查询，这可能是最好的解决方案，但它确实需要更多的工作。我建议您在每次分辨率跳跃时将您的画布/容器设置为特定的宽度/高度，这样您可能可以摆脱 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... */

关于设置静态尺寸的另一件事是，您可以更好地控制百分比，特别是在保持宽度/高度比例相等的情况下。