混乱的css动画

在创建动画时，我将图片和其他内容放置在不使用像素的位置。然后我发现，即使我的屏幕看起来很好，不同的屏幕也会让它看起来很差。现在我的问题是,；有什么方法可以让我轻松地将像素更改为百分比，动画将显示在与像素相同的位置？

你不能只将像素转换为百分比。但您可以做的是对要显示的元素的位置进行近似，以及以百分比（%）或vw（宽度）和vh（高度）表示的大小

使用vw和vh（即视口宽度和视口高度），可以根据视口的实际屏幕大小（不依赖于设备）对齐内容。 例如：

左边距：50vw表示左侧的边距，该边距是当前大小的浏览器视口的一半（即使已调整大小）

这是一个绝对定位标准，与绝对测量的像素或em形成对比

您可以看到下面演示的示例：


div{
宽度：40px；
高度：40px；
背景：灰色；
保证金：2E2EM 2E2EM；
颜色：白色；
文本对齐：居中；
}
#a{
左边距：400px；
}
#b{
左缘：40%；
}
#c{
左边距：40vw；
}
A
B
C
即使将像素转换为百分比，它仍然可能看起来不正确，因为位可能丢失

要获得百分比，您必须获取每个单独列和图像宽度的值，然后除以总宽度并乘以100

例如，假设您有一个1000px宽的网页，两个图像位于x=20px，宽度为150px，另一个位置位于x=190px，宽度为300px。这将使您在图2右侧有510px的间隙

使用百分比，图像1的新x位置将为（20/1000）*100=2%。图像1的宽度为（150/1000）*100=15%。图像2的x位置为（190/1000）*100=19%，宽度为（300/1000）*100=30%。与右翼的差距为51%
 如果您可以发布一些代码，我们可以帮助您解决问题，您可以尝试使用媒体查询调整不同屏幕的动画