@a007mr
Учусь разработке HTML/CSS/Javascript

Как правильно делать ширину кнопки: в % или px?

Правильно ли делать ширину кнопки в % для резинового сайта? Или все-таки лучше фиксировать ширину в px, и уменьшать размер в пикселях при меньшем разрешении экрана?

Подскажите пжлст, как будет правильней?
  • Вопрос задан
  • 133 просмотра
Решения вопроса 1
@ilyapashkov02
Frontend Developer
Зачем задавать фиксированную ширину кнопки, контент внутри нее может поменяться. Лучше задать внутренние отступы
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
IlyaDeveloper
@IlyaDeveloper
UX/UI Дизайнер
В вашем вопросе вы не учли самый главный нюанс, все зависть от дизайна приложения, если все делать по канонам, то есть сначала сделать ui guide всех элементов что нарисовал дизайнер, смотря на гайд можно сразу понимать все отступы и все размеры кнопок и сразу разметить нужные модификаторы для кнопок, а потом только использовать по мере надобности!

Смотря с какой стороны посмотреть, конечно лучше сразу учесть отступы и размеры кнопок задавать с помощью модификаторов, также я рекомендую забыть про px а использовать глобально rem и если надо локально то em!

Вот смотри с одного из проектов:
.button {
  &--sm {
    height: $btn-size-sm;

    padding: 0 rem(20);

    font-size: $btn-size-sm-fn;
    line-height: $btn-size-sm - rem(2);
  }

  &--xs {
    height: $btn-size-xs;

    padding: 0 rem(20);

    font-size: $btn-size-xs-fn;
    line-height: $btn-size-xs - rem(2);
  }

  &--full {
    width: 100% !important;
  }

  &--s150 {
    min-width: rem(150) !important;
  }

  &--s220 {
    width: rem(220) !important;

}


Почему rem или em, потому что они еще позволяют легко менять пропорции если это надо к примеру на маленьких экранах не все влезло:
html {
  font-family: $font-family-primary;
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  line-height: normal;
  letter-spacing: normal;

  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  @media (max-width: 992px) {
    font-size: 15px;
  }

  @media (max-width: 760px) {
    font-size: 14px;
  }

  @media (max-width: 380px) {
    font-size: 13px;
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
WWHW Санкт-Петербург
от 40 000 до 100 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
22 янв. 2019, в 17:47
300 руб./за проект
22 янв. 2019, в 17:36
600 руб./за проект
22 янв. 2019, в 17:30
100 руб./за 1000 зн.