Как сделать сайт резиновым?

Question

[misha_mishy]

Вопрос не совсем наверное корректный, но я все же хотел бы спросить.
Я очень хочу научиться адаптивной верстке, но у меня все всегда упирается в медиа запросы, которых огромное количество. Я верстаю под экраны 1920х1080, в итоге, когда дело доходит до просмотра сайта на мониторах меньших разрешений, все отображается коряво и как-то не так.
В итоге я трачу огромное количество времени на подгон сайта на все типы устройств.
Скажите пожалуйста, как сделать сайт резиновым?
Видел подобное исполнение у apple, где если сайт сжимать, то он просто пропорционально уменьшается, а на мобильных устройствах включается мобильная версия сайта.
Знаю, что это сделано при помощи rem, но как он подстраивается под все устройства и выглядит одинаково хорошо во всех браузера непонятно. Может там скрипт какой-то высчитывает ширину окна браузера и тем самым меняет размер шрифта у html?
Буду максимально благодарен, если вы подробно расскажете про весь этот процесс.

Comments

[Rustam Bainazarov]

Делайте нормальную responsive-вёрстку и не городите костылей.

И почему стандарт 1920? Большинство ноутбуков до сих не вылезли за 1360–1600px в плане размера viewport.

Answer 1

[Василий Хрягин]

vw для шрифтов и размеров. Обычно html тегу пишут font-size: X vw и потом пишут em, rem
Вот смотри как тут https://dreem.com/en/understand

Answer 2

[Сергей Кутузов]

Для шрифтов наоборот, запрещается масштабирование, иначе он станет нечитабельным.
meta name="viewport" content="width=device-width, initial-scale=1"
А для других элементов - размеры в процентах, em, rem, vw, vh
Но без media screen ведь всё равно не обойтись. Расположение элементов всё равно менять надо.
Вот тут чисто резинка код