Есть ли универсальный способ для пропорционального уменьшения всех элементов сайта, в зависимости от разрешения экрана?

#javascript #html #jquery #css

Здравствуйте. Передо мной стоит следующая задача. Нужно чтобы при уменьшении разрешения
экрана, все элементы сайта пропорционально уменьшались, как-будто ты меняешь масштаб.
Есть-ли какой-либо универсальный способ проделать это, чтобы не писать адаптивную версию
к каждому элементу? Все картинки указаны в пикселях.
    

Ответы

Ответ 1

Не утверждаю, что метод универсальный, т.к. требует поддержки CSS3, но посмотрите
в сторону свойства CSS transform и @media.
Например здесь приводится вариант его использования для увеличения до 150%:


body {
  transform: scale(1.5);
  transform-origin: 0 0;
}


С помощью CSS запроса @media можно установить требуемые значения для различных разрешений
экрана, а также комбинировать их с дополнительными условиями, такими как ориентация
экрана или тип устройства (более подробно об использовании @media здесь или на русском
здесь):


@media all (max-width: 800px) {
  body {
    transform: scale(1.0);
    transform-origin: 0 0;
  }
}
@media screen and (max-width: 1024px) and (orientation: landscape) and (device-aspect-ratio:
16/9) {
  body {
    transform: scale(1.1);
    transform-origin: 0 0;
  }
}


Ответ 2

Можно привязать размеры к ширине окна



html{
  font-size:calc(100vw/638); /* 100/ширина_для_которой_были_рассчитаны_размеры_в_пикселах */
}
body{
  font-size:16rem;
}
/* далее везде вместо px указывается rem */
div {
  width:100rem; /*100px*/
  background:yellow;
}


  
 При ширине окна 638 данный блок будет шириной 100 пикселей 






Заменив vw на vh, vmin, vmax можно привязать все размеры к высоте окна, минимальному
или максимальному из двух размеров.