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

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

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

Подскажите пжлст, как будет правильней?
  • Вопрос задан
  • 161 просмотр
Решения вопроса 1
@kristenstewartdadada
Frontend Developer
Зачем задавать фиксированную ширину кнопки, контент внутри нее может поменяться. Лучше задать внутренние отступы
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
IlyaDeveloper
@IlyaDeveloper
Top Rated | Expert Web Developer
В вашем вопросе вы не учли самый главный нюанс, все зависть от дизайна приложения, если все делать по канонам, то есть сначала сделать 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;
  }
}
Ответ написан
@marki1404
в % правильней
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы