Комментарии 11
Так какую проблему мы "победили"? Перечитал несколько раз. Кстати, что по этому поводу думает дизайнер?
Лучше всего на этот вопрос может ответь демонстрация на CodePen, можно увидеть, как с помощью несложного кода реализуется резиновая верстка. Дизайнеры хорошо к этому относятся, потому как для мобильной и десктопной версии возможен PerfectPixel. А то, что при этом подходе, PerfectPixel не возможен для планшетной версии - небольшая цена.
Выглядит избыточно и никому ненужным кроме самого разработчика. На мой взгляд это шаг назад и не стоит того.
Конечному потребителю абсолютно плевать на пиксель-перфект, который сегодня в принципе невозможен, у него нет рядом макетов для сравнения, чтобы сказать "вот же верстальщик лошара"
Похоже, вы просто еще не сталкивались с подобной проблемой.
"Бизнесу" это не надо. Проблемы нет.
Проблема в том, что нет единого способа сделать резиновую верстку, все придумывают свой велосипед. Этот же способ претендует на единый подход. Чтобы вы не думаю, что только я пытался решить эту проблему, вот еще ссылка https://www.youtube.com/watch?v=6l6IJLlSoLo
Последняя формула некорректная из-за смешения пикселей и процентов.
От себя скажу, что подход сомнительный. Я в своё время всё это изобретал и проходил. На практике это работает далеко не так удобно, как кажется поначалу. Очень легко запутаться и накосячить, особенно если код потом правят разные люди. Дебажится трудно, порой даже трудно понять, а правильно ли оно сейчас работает? Короче, быстро выходит из под контроля, а плюсы при этом неочевидны.
Знаю, приятно почувствовать себя умным, но обычно эти формулы не строят свеч.
Соглашусь, что с rem могут быть сайд эффекты, ну формула гибкости работает безупречно. В примере: padding: calc((60 - 15) * var(--kw) + 15px); На мобильных версиях (320px) гарантированно будет 15px, на десктопе (1440px) будет 60px. Строго между этими значениями резина. Хотя бы такое использование, я смело могу рекомендовать для продакшена.
Да, математически формула работает. Но я немного о другом.
Если брать более-менее сложные проекты, то там неизбежно растёт клубок зависимостей. Например, сделали размер основного текста переменным. А потом паддинги привязали к размеру этого текста - ну потому что так логически по дизайну вытекает. А потом какие-нибудь беджики, там размер текста зависит от размера текста материнского блока. А паддинги в беджиках от размера их собственного текста.
Со временем в этом начинает путаеться даже автор. А если на проекте что-то делают много разных людей, то там вообще всё плохо. По опыту, не спасает даже подробная дока - каждый новый человек либо ничего не понимает, либо понимает как-то по своему и плодит баги.
Конечно, если это несложный лендинг, который делает один и тот же человек, тогда проблем нет.
К сожалению, тот же размер заголовка первого уровня меняется нелинейно. А как только появляются медиа-запросы, смысл в формулах пропадает, можно сразу указать конечное значение.
Гибкие макеты: Решаем проблему на корню