缩放时绝对html布局被破坏

我不熟悉html定位。我主要使用绝对定位，如：

#div {
position:absolute;
left:50%;
top:30%;
}

当我在谷歌浏览器中缩放页面时，布局被破坏了。所有元素的大小都会变大，同时也会向右移动，相互之间的位置也会变得混乱。当我在Safari中缩放同一页时，它只是向右缩放（就像静态图片一样）

---

你能解释一下吗，怎么了？如何正确定位它？

您使用的是百分比。放大时，百分比将基于容器。如果你不喜欢，那么就不要使用百分比。放大和缩小时，容器将调整为新大小，容器中的元素也将调整为新大小。如果您希望某些内容基于像素大小us

px

您应该设计您的布局，使元素随着屏幕大小的变化流动并移动到新的位置。您应该了解如何在css中使用

@media（）

。您不希望移动的元素基于百分比使用

%

，而您希望脊状的元素使用

px

使用

@media（）

可以在样式中创建断点，以便根据容器和显示的不同属性进行硬更改。使用不同的

@media（）。您还可以根据显示密度设置不同的css

查看
@media（）
：

关注响应性网页设计：

另外，放大或缩小页面的人希望事情看起来不对劲。大多数时候，他们在桌面上做这件事是因为他们的眼睛老了，希望它能打破这种风格。在这种情况下，他们所关心的只是能够阅读内容。除了100%的缩放值，我不会对它的外观施加太大的压力。在手机或平板电脑上进行缩放不会产生同样的效果，并且应该不会对您的设计产生任何问题。但假设你要做响应性设计，用户就不需要放大手机或平板电脑。如果您的用户必须放大手机或平板电脑，那么您没有做出良好的响应设计
 “请你解释一下，怎么了？”使用绝对定位。可能重复：也许你可以在[这里][1]找到你的回答。[1] ：这完全取决于您的布局和需要。如果你有一个普通的布局，通常很少有理由使用绝对定位。请记住，绝对定位元素是相对于其最近的定位祖先进行定位的，它们将从文档流中删除。这篇文章很老，但可能有助于解释为什么以及何时应该使用绝对定位。如果我使用像素而不是百分比，我是否需要为每个显示分辨率制作不同的布局？