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

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

Ответ

Не утверждаю, что метод универсальный, т.к. требует поддержки 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; } }