Как сделать одинаковое отображение верстки на различных мониторах?

Question

[Дмитрий Гормаш]

Добрый день. Столкнулся со следующей проблемой:
Есть верстка, которая была сделана под разрешение экрана 1368*768 px. Понятно, когда открываешь эту верстку на Full hd или Retina, то шрифт и элементы верстки становятся немного меньше в размере.
Возможно ли сделать, чтобы верстка отображалась одинаково на мониторах с различным разрешением(больше за 1368*768) ?

Для примера(макет с гугла):
На 1368 - верстка отображается так:

Рис.1

На экранах с большим разрешением, эта верстка будет отображаться, примерно так

Рис.2

Результат на больших экранах должен быть такой, как на Рис.1
Возможно ли как то масштабировать сайт разрешения?

p.s. Прошу прощение за каламбур.

Comments

[Lynn «Кофеман»]

С чего бы? Вы смотрели на реальных экранах?

Answer 1

[Алексей]

Шрифты делайте в em, задав основной размер один раз. Верстайте по сетке (кастомизировать можно под разрешения) + медиа запросы, про картинки в поиске посмотрите под ретину были уже решения.

Answer 2

[Алексей Сол]

Добавлю про картинки под ретину. Фотографии и прочие сложные растровые изображения можете использовать в обычном и х2 размерах, а иконки делать с помощью SVG. Также, если вам не нужны какие-либо нестандартные иконки, то можете освоить иконочный шрифт Font Awesome - очень классная вещь.

Answer 3

[Гриша Никольский]

Согласен с Алексеем. Добавлю, что самая распространенная сетка - bootStrap.
Для ознакомления с адаптивной версткой советую данное видео.