Комментарии 8
Здорово конечно. Разработчику. Но сайт с такими минусами вызывает у меня глубокое отторжение.
Интересный подход, для новостных сайтов может не лучший выбор, а вот для приложений самое то! Спасибо!
Для десктопа так делать не советую. Ну можно для маленькой ширины, но это когда адаптировать совсем лень. Удобно использовать для телефона, планшета или телевизора.
Много лет использую этот прием с rem. Даже делал доклад на MoscowJS. Это по сути получается векторная графика - и соответственно получаем проблему дробных пикселей у маленьких элементов. Это линии в один пиксель или когда нужно выравнивать что-то по вертикали .
Из минусов - нужно постоянно помнить что верстаешь векторную графику. В коде js тоже нужно это помнить. Всем картинкам не забывать указывать размер.
Кому интересно как работает могут посмотреть тут https://ooko.pro . Только нужно через телефон или в инспекторе включить мобильный и перезагрузить. Так как учитываю агент браузера.
Прочитал с интересом, но, на мой взгляд, минусы для пользователя полностю перекрывают плюсы для разработчика. Мы все же сайты делаем, для того, чтобы люди их смотрели, по возможности, с комфортом. Говорю как человек постоянно пользующийся + / -.
Ломать зум - это однозначно плохая практика. Описанный в статье подход уже несколько лет как описан, опробован и признан неудачным. Существуют другие реализации, которые rem к размеру экрана привязывают и при этом зум сохраняют.
Может дадите пруф? Или наименования для гугления.
Да нет какого-то однозначного названия. Одно время эти методы фигурировали как "css-шлюзы", но по факту это целая группа похожих методик. Например:
https://css-live.ru/articles/matematika-css-shlyuzov.html
В формуле должен появиться свободный член: y = kx + b. Коэффициент k при этом становится меньше, чтобы размер рема рос не прямо пропорционально вьюпорту, а с отставанием. Это основная поправка, а дальше идёт много мелких вариаций.
Публикации
Используем REM для адаптива: комфортная резиновая вёрстка для всех устройств