Как реализовать пропорциональное уменьшение сайта (будто это картинка)?

Question

[chelnokov_a]

Добрый день. Знаю что вопрос странный)

Есть верстка 1920. Необходимо сделать чтобы если я открываю сайт на 1440 он выглядел абсолютно так же как для пользователей с 1920, только в пропорционально уменьшинном масштабе. То есть вел себя как картинка практически.

Я указал в vueport 1920 ширину.
Если открыть инструменты разработчика и смотреть как сайт выглядит на разных устройствах = то я получаю желаемый результат




Но если я открываю сайт без инструментов разработчика, то он упирается в края



Можно ли сделать так, чтобы он вел себя как картинки. По сути это абсолютная резина с учетом всего (шрифтов, отступов и тд)

Спасибо!!!

Comments

[Ankhena]

Можете задать все размеры в vw.
Предварительно подумав, как должны себя вести бордеры шириной в 1px и подобные нюансы.

Также есть извращенские варианты типа scale.

Если открыть инструменты разработчика и смотреть как сайт выглядит на разных устройствах = то я получаю желаемый результат

Логично, потому что он работает только на мобильных устройствах.

[Антон Литвиненко]

по идее если убрать вьюпорт то должен вести себя как фикс, вот пример
mozayka.kiev.ua

[Ankhena]

Антон Литвиненко,

если убрать вьюпорт

Но только на мобилках и так, как будто вьюпорт ~1000 (в разных браузерах этот размер разный), а не как 1920.

[Александр Кузнецов]

vueport - это видимо какой-то новый классный инструмент)) Нужно будет попробовать.
Интересно, Эван лично над ним работал или это от сообщества?..

[Сергей delphinpro]

Александр Кузнецов, Viewport – это английское слово, переводится как область просмотра
Стандартная сущность в спецификациях html/css.
К Vue не имеет никакого отношения.

[Александр Кузнецов]

Сергей delphinpro, спасибо за уточнение, но оно должно быть адресовано автору вопроса, а не мне.

[Сергей delphinpro]

Александр Кузнецов, =) и правда, невнимательность..

Answer 1

[Александр Кузнецов]

Нужно вычислять ширину экрана в процентах от эталона и в зависимости от этого устанавливать коэффициент в css-свойстве transform: scale(X) на корневом элементе.

Не особо эффективное в плане производительности и использования клиентских ресурсов решение, зато надёжное и простое. Да, можно сделать резиновые пиксели, можно все размеры указывать в rem, а font-size корневого детектива менять в зависимости от обстоятельств. Изящное, эффективное, но не самое простое в реализации решение (по крайней мере если речь идёт об адаптиве и поддержке нескольких типов экранов).

Если нужно по-быстрому сделать и забыть, то проще всего "заскейлить".