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

Question

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

Answer 1

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

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

使用基于百分比的定位，主要问题是您永远无法真正控制元素在屏幕上的位置，因为 320px 宽屏幕的 20% 与 20% 有很大不同% 在 1920 像素宽的显示器上。
使用媒体查询，这可能是最好的解决方案，但它确实涉及更多工作。我建议在每次分辨率跳跃时将您的 canvas/container 设置为特定的 width/height，这样您就可以摆脱 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... */

设置静态尺寸的另一个好处是您可以更好地控制百分比，特别是如果您保持 width/height 比例相等。

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

Keeping translate css (x,y) values same for all screen resolutions?

html

css

translate-animation