Как сделать, чтобы сайт приближался и не ломался?

Question

[AnSash]

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

Comments

[Виталий Першин]

Антон все правильно сказал, изучайте адаптивную верстку и используйте медиа запросы
Про rem, em не слушайте в вашем случае это ничем не поможет, только больше вопросов появится. Про transform вообще бред, никто в своем уме так не делает

Answer 1

[Антон]

Увеличение масштабирования это уменьшение разрешения, потому используйте медиа-запросы для блоков вашего сайта.
Грубо говоря, когда мы увеличиваем сайт колесиком до 175% это примерно тоже самое, как уменьшить разрешение экрана с 1920 до 1200 px. В обоих случаях сайт поведет себя одинаково.

Answer 2

[vladislav198712]

Для того, чтобы сайт не ломался при масштабировании, можно использовать относительные единицы измерения вместо абсолютных, таких как пиксели или проценты. Например, можно использовать единицы измерения "em" или "rem", которые основаны на размере шрифта, а не на размере экрана. Это позволит элементам сайта масштабироваться пропорционально друг к другу и сохранять свою расстановку.

Также можно использовать медиа-запросы для определения оптимальных размеров элементов при разных размерах экрана. Например, можно создать медиа-запросы для разных диапазонов ширины экрана и задать оптимальные размеры для элементов при каждом диапазоне. Например:

@media (max-width: 768px) {
  /* Задать размеры для элементов при ширине экрана до 768px */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Задать размеры для элементов при ширине экрана от 769px до 1024px */
}

@media (min-width: 1025px) {
  /* Задать размеры для элементов при ширине экрана от 1025px */
}

Кроме того, можно использовать векторную графику и шрифты, которые могут масштабироваться без потери качества.

Чтобы сделать аккуратное увеличение сайта, как на Хабре, можно использовать CSS-свойство "transform: scale()". Это свойство позволяет масштабировать элементы сайта без изменения их размера на странице. Например, можно задать следующие стили для body:

body {
  transition: transform .3s ease-in-out;
}

body.zoom-in {
  transform: scale(1.2);
}

Эти стили позволят масштабировать сайт с помощью класса "zoom-in". Когда этот класс добавляется к body, сайт увеличивается на 20% без изменения расстановки элементов.

Answer 3

[SVM]

да никак есле это не оргаеазовано усстроителем хоста/сайта
просто забыть про него )) и никкогда тудум не ходить
кривая вёрстка
это не про ваш комп ))
даже старый пень и то читает фсё

Comments

[wisgest]

Надо полагать, что вопрос именно от устроителя сайта.

[SVM]

значит такой устроитель,
от этого все ноги и ростут ))