缩放时绝对html布局被破坏 [英] Absolute html layout is broken when zooming

问题描述

我是新的html定位。我大多使用绝对定位，如：

I am new to html positioning. I mostly use absolute positioning like:

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

当我在Google Chrome中缩放页面时，布局被破坏。所有元素的尺寸越大，也向右移动，并且彼此混乱。当我在Safari中缩放相同的页面时，它只是向右（如静态图片）放大。

When I zoom the page in Google Chrome,layout is broken. All elements get bigger in size and also move to the right and get positioned chaotic to each other. When I zoom the same page in Safari, it's just zoomed right(like a static picture).

你能解释一下，什么是错误？如何正确放置？

Can you explain please, what is wrong? How do I position it correctly?

推荐答案

您使用的是百分比。当放大时，百分比将基于容器。如果你不喜欢那么不要使用百分比。当您放大和缩小容器正在调整为一个新的大小，因此将在容器中的元素。如果你想要基于像素大小us px 。

You're using percentages. When you zoom in the percentage is going to be based off the container. If you don't like that then don't use percentages. As you zoom in and out the container is adjusting to a new size and so will the elements in the container. If you want something to be based on a pixel size us px.

你应该设计你的布局，流动并移动到新的位置随着屏幕的大小改变。你应该阅读关于在css中使用 @media（）。元素，你不会有移动和基于百分比使用％和你想要的东西使用 px

You should design your layout so that elements flow and move to new positions as the size of the screen changes. You should read about using @media() in css. Elements you wan't to have move and based on percentage use % and things that you want ridged use px

使用 @media（）可以让你在你的风格中创建断点，您的容器和显示的属性。使用不同的 @media（）组来识别不同的目标（手机，平板电脑，笔记本电脑/桌面，电视）。您还可以根据显示密度设置不同的css。

using @media() will let you make break points in your style so that you can make hard changes depending on different attributes of your container and display. Using different @media() groups to identify different targets for example (phone, tablet, laptop/desktop, tv). You can also set different css depending on display density.

查看 @media（）：
http://css-tricks.com/css-media-queries/

查看回应式网页设计： http://en.wikipedia.org/wiki/Responsive_web_design

Look into responsive web design: http://en.wikipedia.org/wiki/Responsive_web_design

ps。在页面上放大或缩小的人希望东西看起来不正确。大多数时候，他们在桌面上这样做，由于老眼睛，并期望它打破风格。他们在这种情况下所关心的是能够阅读内容。我不会强调如何看起来与任何其他缩放值超过100％。放大手机或平板电脑不会有同样的效果，应该有很少的设计问题。但假设你要做响应式设计，用户不需要放大手机或平板电脑。如果你的用户必须放大手机或平板电脑，你没有做出一个良好的响应设计。

ps. people that zoom in or out on a page expect things to not look right. Most of the time they do this on a desktop due to old eyes and expect it to break the style. All they care about in that situation is being able to read the content. I would not put to much stress about how it looks with any other zoom value than 100%. Zooming on a phone or tablet will not have this same effect and should have very little problems with your design. but assuming your going to do responsive design there will be no need for a user to zoom on a phone or tablet. If your user has to zoom on a phone or tablet you did not make a good responsive design.

这篇关于缩放时绝对html布局被破坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！