Как задавать height и margin-top(bottom) в отзывчивом веб-дизайне?

Question

[PlasterTom]

Как задавать height и margin-top(bottom) в отзывчивом веб-дизайне?

Answer 1

[Сергей delphinpro]

margin-top для текста задавайте в "em" (а размеры шрифта в rem)
для остального - в "rem"
Это позволить управлять ими задавая единственное правило font-size для html в медиазапросе.
С высотой сложнее, но не сильно. просто смотрите по обстоятельствам. Где-то высота зависит от шрифта (em, rem), где-то от экрана (vw, vh), где-то от родителя (%). Пиксели тоже никто не отменяет, случаи бывают разные.

Вообще никто вам не скажет универсальный рецепт на все случаи жизни. Отзывчивай дизайн он потому и отзывчивый, что отзывается на изменения режима просмотра.

Comments

[metaf]

А можете привести в пример сайты сложнее блогов, где отступы заданы в rem и они выглядят нормально с изменением размера шрифта? Просто я тоже когда-то поддалась на эту "мульку" и сверстала сложный леяут на rem. А потом попробовала увеличить шрифт...
Фишка с em мне нравится намного больше, но всё разбивается об суровую реальность, когда дизайнеры выставляют размеры на глаз или, что еще круче, "чтобы с фоном композиция не терялась".

Answer 2

[iBird Rose]

отзывчиво задавай

Comments

[PlasterTom]

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

Answer 3

[devstudent]

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