Адаптивная верстка — фиксированный размер или padding?

Question

[SpideR-KOSS]

Добрый день!

Возьмем для примера обычную кнопку. Известен ее размер - 360px по ширине и 70 по высоте.

По правилам хорошей верстки этот размер достигается прямым указанием width и height для каждого разрешения, или этот размер набирается padding, например по 60px слева/справа и по 20 сверху/снизу?

Comments

[Артур Карапетян]

Лично я всегда делаю конпки паддингами. Мало ли какой завтра у Вас будет текст в этой кнопке

[SpideR-KOSS]

Артур, а как тогда подгонять размер? Кнопка 360px по ширине. Я padding-ом могу сделать такой размер, но при изменении текста размер кнопки измениться. Клиент требует Pixel Perfect. Как быть?

Answer 1

[Егор Живагин]

Обговаривается с дизайнером

Если кнопка типовая, текст в ней меняться не будет (согласно макету), то можно и прямо указать.

Для масштабируемости решения лучше отступы, конечно.

Answer 2

[Froggyweb]

для кнопок лучше указывать паддинги в em или rem

Comments

[Андрей Брекоткин]

Зачем?

[Froggyweb]

Андрей Брекоткин, при изменении размера шрифта дизайн кнопки сохраняется (за счет пропорциональных отступов.) при адаптации да и вообще удобно

[Андрей Брекоткин]

Froggyweb, вот когда дизайнер рисует кнопку с 20 шрифтом и с 14 шрифтом с одинаковыми отступами em или rem только мешается. Если произошло изменение шрифта вы скорее всего применили к кнопке другой или дополнительный класс. Вот в нем лучше и задать новые значения для паддинга.

Answer 3

[zoozag]

Если размер кнопок по макету зависит от длинны текста, смотрим padding, если не зависит то задаем ширину кнопки. При этом padding небольшой тоже лучше задавать, на случай если будет длинный текст, чтобы не прилипал к краям.

Высоту лучше жестко не задавать, вдруг у вас текст не будет влазить в одну строку.