Абсолютный html макет разбивается при масштабировании

Question

Я новичок в размещении html. В основном я использую абсолютное позиционирование:

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

Когда я увеличиваю страницу в Google Chrome, макет разбит. Все элементы становятся больше по размеру, а также перемещаются вправо и становятся хаотичными друг другу. Когда я увеличиваю ту же страницу в Safari, она просто масштабируется вправо (как статическое изображение).

Не могли бы вы объяснить, пожалуйста, что не так? Как правильно позиционировать его?

Answer 1

Вы используете проценты. Когда вы увеличите масштаб, процент будет основываться на контейнере. Если вам это не нравится, не используйте проценты. По мере увеличения и уменьшения масштаба контейнер настраивается на новый размер, а также элементы в контейнере. Если вы хотите, чтобы что-то было основано на размере пикселя us px.

Вы должны спроектировать свой макет, чтобы элементы перемещались и перемещались в новые позиции по мере изменения размера экрана. Вы должны прочитать об использовании @media() в css. Элементов вы wan't, чтобы двигаться и на основе процентного использования % и вещи, которые вы хотите использовать коньковый px

с помощью @media() позволит вам сделать брейк-поинт в вашем стиле, так что вы можете сделать жесткие изменения в зависимости от различных атрибутов контейнер и дисплей. Использование разных групп @media() для идентификации различных целей, например (телефон, планшет, ноутбук/рабочий стол, телевизор). Вы также можете установить разные css в зависимости от плотности экрана.

Посмотрите в @media(): http://css-tricks.com/css-media-queries/

Посмотрите на адаптивный веб-дизайн: http://en.wikipedia.org/wiki/Responsive_web_design

пс. люди, которые увеличивают или уменьшают масштаб страницы, ожидают, что ситуация не будет выглядеть правильно. Большую часть времени они делают это на рабочем столе из-за старых глаз и ожидают, что он сломает стиль. Все, о чем они заботятся в этой ситуации, - это возможность читать контент. Я бы не стал уделять большое внимание тому, как он выглядит с любым другим значением масштабирования, чем 100%. Масштабирование на телефоне или планшете не будет иметь такого же эффекта и должно иметь очень мало проблем с вашим дизайном. но при условии, что вы собираетесь делать отзывчивый дизайн, пользователю не нужно будет увеличивать размер телефона или планшета. Если ваш пользователь должен увеличить телефон или планшет, вы не создадите хороший отзывчивый дизайн.