为什么宽度为百分比的 div 在本地主机与 ElasticBeanstalk 环境中显示为不同的长度？

Question

我运行在本地主机和我的 ElasticBeanstalk 服务器上使用相同的代码，其中一些类使用百分比作为宽度。 The MDN docs for percentage 表示使用百分比

to define a size as relative to an element's parent object.

然而在整个 DOM 树中，宽度值最终偏离了 0.005（见图片）。我的假设是应用程序的根大小略有不同，导致在计算百分比时略有不同。当这些小值加起来时，它们会使事物看起来偏离了它们想要的位置。

为什么会这样？我该如何防止这种情况？

其中一个类为例：

.student-profile-question-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  height: 100%;
  min-width: 30%;
  max-width: 100%;
  z-index: 10;
}

Picture 1 for reference - localhost is on left and EB environment is on the right.

Picture 2 for reference - you can clearly see the left is bigger but the width value is the same due to rounding

Answer 1

如Coll所述，

it looks like you're looking at two sites with different zooms set -- Chrome can do this easily. 'View -> Actual Size' on both sites to determine you're viewing at actual sizes.

感谢您的帮助 - 我从来不知道缩放可以像在选项卡之间那样切换。

为什么宽度为百分比的 div 在本地主机与 ElasticBeanstalk 环境中显示为不同的长度？

Why do divs with width as percent display as different lengths on localhost vs ElasticBeanstalk environment?

css

localhost

reactjs

amazon-elastic-beanstalk