Какие единицы лучше использовать при адаптивной верстке?

Question

[myaca]

Собственно, при верске из .psd, делая 2 варианта страницы (т.е. mobile и desktop), какие единицы лучше использовать?

Насколько я понимаю, для всяких отступов лучше использовать проценты.
А как быть со шрифтами и изображениями?

Answer 1

[Ankhena]

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

Спросите дизайнера, если сами не можете разобраться.
Если по задумке отступ зависит от ширины блока, то да, проценты. Если от размера шрифта, то em или ex. Если он вообще постоянный, то пиксели.

А как быть со шрифтами и изображениями?

Аналогично.

Answer 2

[Vlad Feninets]

em или rem.
их принцип заключается в том, что они вычисляются относительно родительского font-size, т.е. на определнном брейкпоинте вы можете указать у родителя font-size вместо 16px - 14px и размер шрифта автоматически пересчитается.

различия rem и em заключается в том, что em рассчитывается относительно ближайшего
родителя в DOM (т.е для "l" это "ul"), а rem - относительно "html", поэтому я предпочитаю использовать именно REM

вот демо: https://codepen.io/deluxive/pen/nkHax

Comments

[Вася Петров]

а rem - относительно

Пропустил "коневого" (html) ;)

[Vlad Feninets]

Вася Петров: написал его тегом, а он спарсился((
спасибо - поправил

[Вася Петров]

Vlad Feninets: для тегов используй <code></code>. В редакторе под многоточием :)

Answer 3

[Islam Ibakaev]

если ты делишь страницу на компоненты, то размер шрифта компонента задаётся в rem, а всё остальное внутри - в em.
посмотри пример
я использовал rem чтобы задать размер шрифта компонента. Размеры дочерних элементов компонента должны зависеть от размера шрифта самого компонента, а не корневого элемента, поэтому внутри компонента всё вem.
Для чего вообще это делать? Просто измени значениеfont-size у класса .card__card_big

Answer 4

[Вася Петров]

Величина «rem» вместо пикселей — что это такое?