Как задать фиксированный размер блоку, чтобы он не изменялся при масштабировании, и сместить его в нужное место?
Здравствуйте. Только недавно начал изучать программирование и столкнулся с такой проблемой. Каким способом можно закрепить блок в одном месте, чтобы он не менял расположение при масштабировании? При этом он должен находиться в обозначенной красной рамкой области. Прошу не ругать за банальный вопрос, несколько дней пытаюсь решить проблему с помощью гугла, но не выходит. Спасибо за внимание!
Как при изменении размеров окна браузера запретить менять масштабирование элементов
Как при изменении размеров окна браузера сделать так, чтобы та сайт вообще не менялся, т.е. та часть, которая окажется за пределами окна, просто не была видна. Например, у сайта vk.com, да и у большинства, так делается.
я не о фиксированной и резиновой верстке. пример того, что я хотела https://pp.vk.me/c631422/v631422331/30b35/ee0Ehvv26_E.jpg
Данное поведение достигается за счет заданной минимальной ширины, с помощью свойства min-width . В случае с Яндекс это min-width: 936px; . Вот пример их CSS:
Ниже приведен полный пример требуемой вами верстки:
Вот такой meta тег запретит мобильным устройствам масштабировать страницу:
А вот эти стили не дадут содержимому страницы сжаться меньше, чем до 1200px по ширине.
Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай — сочетание <user-scalable=no или maximum-scale=1 с initial-scale=1> Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!
Ключевое слово здесь user-scalable=no
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.24.43458
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Отключить масштабирование в div, но разрешить масштабирование на странице (альтернативный div)
Есть ли способ отключить масштабирование div или каких-либо конкретных элементов на веб-сайте? Например, если бы я хотел, чтобы страница была масштабируемой, но не div #Header, есть ли способ сделать ее масштабируемой, а другую не масштабируемой?
В основном, когда вы увеличиваете масштаб мобильного устройства, оно также увеличивает масштаб заголовка, но я хочу, чтобы заголовок был фиксированным размером во все времена (не масштабируемым).
Я знаю, что вы можете использовать этот код, чтобы отключить масштабирование в целом:
4 ответа
Вкратце: вы не можете этого сделать без умных хаков.
Однако вы можете (и должны) использовать следующий CSS для устранения проблем с масштабированием на мобильных устройствах:
Этот код включает position: absolute , когда ширина экрана меньше или равна 720px, а заголовок становится частью страницы, а не фиксируется сверху.
Короче, вы, безусловно, можете это сделать.
Вы можете перетащить события изменения размера окна и изменить размер вашего плавающего div в соответствии с изменением dpi, вычисленным из различных атрибутов нового окна и внутренней ширины и высоты.
Итак, когда вы увеличиваете масштаб, вы хотите сжать плавающий div, чтобы он сохранял исходный dpi, и наоборот.
Это была бы эпическая скрипка — скоро повторите этот ответ, так как мне, возможно, придется это сделать. Уже заметили некоторые несоответствия кросс-браузера с разрешением dpi, так что да, весело.
Элементы HTML смещаются при увеличении
Когда я пытаюсь увеличить масштаб моей HTML-страницы, такие элементы, как Div, неуместны, как будто они «пытаются реагировать» вместо того, чтобы фиксироваться на своих первоначальных позициях.
Чтобы дополнительно продемонстрировать проблему, вот Codepen моего макета . Попробуйте увеличить или уменьшить масштаб страницы. Обратите внимание, как меняется положение столбцов.
HTML :
CSS :
Я хочу зафиксировать все столбцы Div на их точных позициях, чтобы убедиться, что они остаются нетронутыми при увеличении масштаба пользователя ( Прекрасные примеры : Facebook Stackoverflow не изменяется при увеличении)
Ребята, вы можете проверить мой Codepen и предложить мне решение?
4 ответа
Так как ширина ваших столбцов задается с помощью px в качестве единиц измерения, ширина оболочки также должна быть установлена таким же образом. Попробуйте изменить максимальную ширину оболочки на минимальную ширину следующим образом:
Кроме того, положение зеленых ящиков не должно быть фиксированным. Удалите фиксированный атрибут в .fixed-container-inside-column.
Наконец, если вы не хотите, чтобы последние два столбца адаптировались к размеру окна, вы должны также установить их плавающее значение влево:
При этом ваш эскиз вел себя как ожидалось при увеличении и изменении размера окна браузера.
У вас есть следующее в CSS
Поэтому, когда мы увеличиваем масштаб, браузер старается изо всех сил, чтобы соответствовать рамкам на экране. Если они не подходят, те, которые не подходят, перемещаются на более низкий уровень.
Вы можете попробовать придать оболочке фиксированную ширину в пикселях. Вместо максимальной ширины вы можете установить ширину в пикселях
Width: 100% означает, что они занимают все пространство родительского контейнера, что в данном случае означает, что они занимают всю ширину области браузера. Ширина в терминах «px» зависит от операции масштабирования, поскольку каждый пиксель теперь представлен большей областью экрана. Мы хотим, чтобы в ящиках всегда было достаточно места, чтобы они не плавали на нижний уровень.