使网页缩放（防止压缩/扩展元素）

Question

是否有一种简单的方法可以确保页面上的所有元素保持在相同的精确位置，无论放大/缩小多少？为了澄清，我不希望元素在缩放时进行压缩，并在缩小时进行扩展。我喜欢的一个很好的例子是堆叠本身！尝试放大/缩小。元素相对于原​​始屏幕尺寸的位置保持完全不变 - 只有用户的视角发生了变化。

Answer 1

我有一个非常简单的解决方案，对我有用。我只是在HTML页面的主元素上设置了一个width最小属性，所以现在只要有人放大到该最小宽度值以上，它就不会影响主体，因为它不能小于主体的最小宽度。查看结果

This is what it looked like before.。

然后我将最小宽度插入到#main中，该宽度是与html中的主要标签相对应的ID

#main {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  min-width: 1400px;
}

结果是这样 After adding the CSS code

如您所见，我已经将浏览器放大了很多，并且在上图中的元素相互重叠的位置，现在放大一定数量后它们会停止靠近。 希望这会有所帮助！