Задать вопрос

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

Из-за того, что размеры указаны в процентах, когда увеличиваю сайт с помощью ctrl + прокрутка мыши, элементы сайта тоже увеличиваются и их расстановка ломается, как сделать, чтобы сайт приближался как картинка и/или с помощью чего (тоже медиа запросов?) сделано аккуратное увеличение сайта тут, на хабре?
  • Вопрос задан
  • 890 просмотров
Подписаться 3 Простой 1 комментарий
Решения вопроса 1
@anton99zel
29а класс средней школы №7
Увеличение масштабирования это уменьшение разрешения, потому используйте медиа-запросы для блоков вашего сайта.
Грубо говоря, когда мы увеличиваем сайт колесиком до 175% это примерно тоже самое, как уменьшить разрешение экрана с 1920 до 1200 px. В обоих случаях сайт поведет себя одинаково.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 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% без изменения расстановки элементов.
Ответ написан
Комментировать
sotvm
@sotvm
Умный поймёт, а дураку и так всё равно.
да никак есле это не оргаеазовано усстроителем хоста/сайта
просто забыть про него )) и никкогда тудум не ходить
кривая вёрстка
это не про ваш комп ))
даже старый пень и то читает фсё
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы