Самопроизвольно меняется масштаб в браузере
Проблема при изменении масштаба в браузере. Весь контент смешается влево. Многие пишут, что margin: 0 auto; решит проблему, но не помогло. Дайте совет.
Я исследовал только элемент H1 предложенного вами кода. В стилях этого элемента вы указали следующие свойства:
- margin-top - устанавливает верхний край элемента;
- margin-left - устанавливает левый край элемента;
- top - для абсолютно позиционированных элементов это свойство устанавливает верхний край элемента на единицу выше / ниже верхнего края его ближайшего расположенного предка;
- left - для абсолютно позиционированных элементов это свойство устанавливает левый край элемента в единицу слева / справа от левого края его ближайшего расположенного предка;
- text-align - указывает горизонтальное выравнивание текста в элементе.
Все эти элементы стилей создают/обозначают позицию для H1 в выдаче документа браузером. И эти свойства борются между собой и мешают друг другу.
Возможное решение: примените единицы 100vw и/или 100vh CSS для позиционирования этого элемента. Свойство vw - указывает 1% ширины относительно окна просмотра. 100vw всегда будет вычислять до 100% ширины окна просмотра. Если вы используете проценты, и у вас нет 100% от корня, вы не можете быть уверены в правильном вычислении 100% окна просмотра. Свойство vh - указывает 1% высоты относительно окна просмотра. Информация о этих свойствах w3schools. Для этого свойства примените мета тэг viewport. Моё предложение для стилей вашего элемента H1:
Вы можете видеть, что я оставил для позиционирования только свойство text-align. Однако при применении этих стилей возникает горизонтальная полоса прокрутки. Это можно устранить устанавливая свойство overflow-x:hidden в элемент body. Таким образом общий код будет выглядеть следующим образом:
Извините, что не исследовал полностью, предложенный вами код, но для вашего обучения будет полезным применить данную информацию для других проблемных элементов вашего веб-сайта.
Читайте также: