Rem единицы и проблема самостоятельного обучения и совершенствования во фронте)

[lamela 0]

Всем привет

Меня зовут Павел, занимаюсь версткой довольно продолжительное время, изучаю параллельно другие технологии фронта, все пытаюсь в общем стать крепкой боевой Frontend единицей. Постоянно возникают вопросы как это сделать лучше, перфекционист внутри просит с каждым проектом сделать это лучше, но постоянно какой-то определенный подход заключает в себе свои за и против. Возможно мне нужен ментор? Если да, где можно найти хорошего? Возможно есть какие менторы с почасовой оплатой, которые подскажут и направят на путь истинный. 

В этом топике хотел бы задать такой вопрос. Мне очень нравится способ задания единиц в rem'ах (62.5% у html, что удобно высчитывать по соотношению 1rem = 10px), в медях меняется значение у HTML и получаю красоту. Но постоянно сталкиваюсь с такой проблемой - дизайн мобилки, для примера, имеет элемент A - 14px, элемент B 24px, в десктопе элемент A - 18px, элемент B - 34px. То есть как верстать rem'ами так, чтобы по макетам было? Обычное масштабирование путем заменой значения через медиазапросы для HTML не попадает в нужные значения, а если всякий раз переопределять для элемента значения, то смысла от ремов нет.

Такая же проблема касается и других способов (clamp, vw и тд).

Всем спасибо за внимание)

[klierik 430]

Здравствуйте.

Не совсем понятно какие возникают проблемы при использовании @media, которое в данных случаях работают на отлично

[lamela 0]

Оно конечно масштабируется красиво, и подход почти отличный, но проблемы возникают, когда величины итоговые не совпадают с величинами в дизайне. Для верстальщика одна из главных целей для успешного завершения проекта, чтобы страницы были по макетам и поэтому нельзя просто поменять значение другое rem в адаптиве и чтобы оно еще соответствовало мобильному дизайну по всем величинам

 

[klierik 430]

Я не понимаю как указанные значения могут не совпадать. Сколько раз использовал rem но таких проблем не возникало.

[lamela 0]

Вот пара примеров.

 

Десктоп - https://yadi.sk/i/p0gg7PybQwPwhA

Тут 1rem -> 10px, тут все ок.

Мобильное разрешение - https://yadi.sk/i/2iqIrvvS2tB6qg

Тут 7px для HTML, вроде красиво и масштабируемо, но не по дизайну.

[klierik 430]

Так у Вас соотношение всех значений должно быть линейным, а они таковыми не является.

В таком случае, используя "@media" для соответствующей ширины экрана, для определённого элемента, выставляется индивидуальное значение, которое требует индивидуального расчёта.

Предполагаю что для mobile и для desktop 1rem равен разным px?!

[lamela 0]

Да, вот в этом и проблема. Как использовать rem'ы, если дизайнеры не заморачиваются с линейностью?

Когда элементов много, всякий раз переопределять - теряется смысл от ремов. А пикселями делать хоть и надежно, но как будто шаг назад.

[Evgen73 0]

12 часов назад, lamela сказал:

Да, вот в этом и проблема. Как использовать rem'ы, если дизайнеры не заморачиваются с линейностью?

Когда элементов много, всякий раз переопределять - теряется смысл от ремов. А пикселями делать хоть и надежно, но как будто шаг назад.

А зачем дизайнером  их считать, это вы должны знать и так .  Для каждой вёрстки свои величины   вот и все .   Rem  берутся от родителя и через медиа запросы пишется размер вот и все .  🤘

[klierik 430]

31.12.2020 в 22:06, lamela сказал:

Да, вот в этом и проблема. Как использовать rem'ы, если дизайнеры не заморачиваются с линейностью?

Линейность, в рамках данного контекста, это очень и очень редкая ситуация в веб-разработке.

31.12.2020 в 22:06, lamela сказал:

Когда элементов много, всякий раз переопределять - теряется смысл от ремов. А пикселями делать хоть и надежно, но как будто шаг назад.

Вовсе нет. Как минимум на "rem'ах" можно строить эластичные шаблоны