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