Question

创建动画时，我会定位图片以及不使用像素的图片。然后我发现，即使它看起来很好我的屏幕，不同的屏幕将使它看起来。现在我的问题是;有没有办法让我轻松地将像素更改为百分比，而动画将出现在与像素相同的位置？

Answer 1

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

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

margin-left: 50vw;表示左侧的边距，它是您当前大小的浏览器的一半（即使调整大小）。

与用于绝对测量的像素或em相比，这是绝对定位标准。

您可以看到以下示例：

div{
  width:40px;
  height:40px;
  background: gray;
  margin: 2em 2em 2em 2em;
  color:white;
  text-align:center;
}
#a{
  margin-left:400px;
}
#b{
  margin-left:40%;
}
#c{
  margin-left:40vw;
}

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

打开整页的片段＆amp;调整浏览器的大小以查看div容器的位置变化。

Answer 2

即使将像素转换为百分比，它仍然可能看起来不正确，因为可能缺少位。

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

示例假设您有一个1000px宽的网页和2个图像位于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％。

搞砸了css动画

2 个答案: