Html absolute layout breaks when scaling

I am new to html posting. I mainly use absolute positioning, for example:

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

When I enlarge the page in Google Chrome, the layout does not work. All elements become larger in size, and also move to the right and become chaotic to each other. When I enlarge the same page in Safari, it just scales to the right (like a static image).

Can you explain what happened? How to position it correctly?

+1
source share
1 answer

You use interest. When you zoom in, the percentage will be based on the container. If you do not like this, do not use interest. As you zoom in and out, the container adjusts to a new size, as well as elements in the container. If you want something based on us px pixel size.

You must design your layout so that elements move and move to new positions as the screen resizes. You should read about using @media() in css. Elements that you should not move based on% percent usage and things you want to use use px

using @media() will allow you to create breakpoints in your style so that you can make major changes depending on the different attributes of your container and display. Using different @media() groups to identify different goals, for example (phone, tablet, laptop / desktop, TV). You can also set different css depending on screen density.

Check out @media() : http://css-tricks.com/css-media-queries/

Have a look at responsive web design: http://en.wikipedia.org/wiki/Responsive_web_design

ps. people who zoom in or out on a page expect the situation to not look right. Most of the time they do this on the desktop because of old eyes and expect it to break the style. All they care about in this situation is the ability to read content. I would not pay much attention to how it looks with any other scaling value than 100%. Scaling on a phone or tablet will not have the same effect and should have very few problems with your design. but provided that you are going to make a responsive design, the user will not need to increase the size of the phone or tablet. If your user needs to enlarge the phone or tablet, you won’t create a good responsive design.

+1
source

Source: https://habr.com/ru/post/924506/


All Articles