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

Question

[Игорь]

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


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


Как это сделать быстро и безболезненно?

Answer 1

[Андрей Федоров]

html {
  transform: scale(.9, .9);
}

Comments

[Игорь]

Хорошая мысль, но в этом случае размывается текст меню и страницы :( https://pp.vk.me/c629300/v629300058/59ce1/z0ug2shu...

[Андрей Федоров]

grishin-korolev: Как построить дом площадью 16 соток на участке в 6. (c)... У вас на картинке все элементы пропорционально уменьшены. Невозможно технически сделать pixelperfect при масштабировании.

Answer 2

[Mr Crabbz]

Сделать:

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% вообще.