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

Question

[Антон Locksly]

Есть макет, решил сделать его адаптивным. Столкнулся со следующей проблемой, в каких единицах задавать вертикальные отступы и высоту элементам (margin, padding)? Оставлять в px или в %? Но в отличие от ширины, которая может быть задана максимальной, высота макета будет разной и непостоянной? Или возможно в em? Везде делается по разному, есть ли какая то методика? И как быть с абсолютно споционированными элементами, так как они "сьезжают" относительно шаблона при задание им top,left,bottom в процентах

Answer 1

[teotlu]

margin и padding берут процентные значения от ширины родителя.

А в чём задавать вертикальные отступы — зависит от ситуации. В более-менее стандартном случае блоков с текстом, например, логичнее задавать их в em, поскольку отступы-то эти служат правильному вертикальному ритму, который во многом зависит от стилей текста.

И ещё используйте уже rem, а не em, они сейчас поддерживаются везде, где поддерживаются media queries.

Comments

[Therapyx]

Кстати я вот иногда замечал, что заместо px ili %, делают em, даже на шрифтах. Зачем? и в чем основная разница? )

[teotlu]

Therapyx: px задаёт шрифт в абсолютном значении (в пикселах). em — это размер, рассчитывающийся относительно размера родителя (т.е. если у родителя размер 16px, а вы напишете 1.25em, то размер у элемента будет 20px). rem — это root em, то есть относительный размер, но считающийся не от родителя, а от корневого элемента (html).

Зачем нужны em и rem. Скажем, у вас адаптивный сайт, и вам надо быстро изменить весь размер шрифта на сайте (например, под мобильное разрешение, уменьшить его). Если у вас всё задано в пикселах, вы будете для каждого элемента прописывать новый размер на нужном разрешении. Если же у вас все размеры шрифтов заданы в em/rem, то вы можете поменять только размер шрифта у html, и все остальные шрифты пересчитаются в соответствии со своими коэффициентами. Для адаптивной вёрстки это просто замечательная особенность. Да и в принципе для вёрстки.

Или вот нужно вам встроить фичу смены размера шрифта на всём сайте (для сайтов гос. организаций это обязательное требование, кстати). Вы просто делаете скрипт, который меняет размер шрифта у элемента html, и все остальные шрифты уменьшаются/увеличиваются соответственно.

[teotlu]

Therapyx: под словом "размер" я подразумеваю любую величину (высота, ширина, отступы, размер шрифта и т.д.), которая может быть посчитана и в px, и в em/rem.

[Therapyx]

teotlu: ух ты, вот оно что хД Да это мне пригодится, как раз таки в моих приложениях есть dropdownlist с выбором 3х разных дизайнов... Знал бы раньше) Но в дальнейшем надо будет делать так )

[Therapyx]

teotlu: а то я помню из стандартного лейаута удалял эти ЕМки и прописывал все константно.

[Антон Locksly]

спасибо, разобрался теперь, задавать лучше в rem отсупы значит))

[teotlu]

Антон Locksly: зависит от ситуации, но вообще с ними проще потом поддерживать, да :)

[Антон Locksly]

у меня проблема была с em, так они принимали значение родителя, а шрифты тоже в em, соотвественно приходилось пересчитывать значения в каждом конкретном случае, что очен не удобно

[teotlu]

Антон Locksly: вот поэтому используйте rem и радуйтесь :)