@grishin-korolev

Как масштабировать размеры страниц сайта с помощью css?

Сейчас на моем сайте объекты выглядит так:
c05dc62af5aa4ee8af06aabf036feed5.png

А мне необходимо сделать примерно так, не затрагивая пользовательские настройки браузера пользователей уменьшить размер страниц сайта:
c25e788b958c4bd0a753afffaf4b45a7.png

Как это сделать быстро и безболезненно?
  • Вопрос задан
  • 537 просмотров
Решения вопроса 1
aliencash
@aliencash
Партизан
html {
  transform: scale(.9, .9);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Punkie
@Punkie Куратор тега CSS
Немножечко вордпрессирую
Сделать:
html {
font-size: 62.5%;     // - равно 10px
}


Далее перегоняем все px в rem по формуле: 10 px = 1 rem.

То есть, где padding-left: 340px -> padding-left: 34rem

Когда всё перегнали в rem - просто в селекторе html меняем font-size на 50% например. Всё, что было задано в rem, уменьшиться на 62.5% - 50% = 12.5%. Пропорционально и без всяких блюров.

Только у < img > жесткие width и height уберите в html-коде. Или укажите для них размеры в css (опять же в rem).

Да - не самый быстрый способ. Но самый клёвый. Плюс можно мод медиазапросы постепенно масштабировать макет. Например, при экране 320х - сделать font-size: 25% вообще.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы