Кнопка изменения размера в соответствии с размером экрана

Question

Для кнопки по умолчанию Bootstrap 4 позволяет вам установить для кнопки размер по умолчанию между: xs, sm, md, lg, xl.

Итак, в моем кодесначала маленький экран, я использую размер sm для экрана <576px: </p>

<button type="button" class="btn btn-success btn-sm"></button>

Но для экрана xl ≥1200px, мне нужно изменить атрибут размера или что-то еще с помощью Bootstrap для настройки размера кнопки?

Я не совсем понимаю, как реагирует Bootstrap на кнопку и атрибут size между маленьким и большим экраном.

Спасибо.

Answer 1

Согласно документации Vue.js, я наконец-то вычислил свой класс CSS динамически в соответствии с вызовом события window.onresize в функции mounted ().

Пример:

Вот моя кнопка Bootstrap:

<b-button :size="nsize" variant="outline-success" class="my-2 my-sm-0">
     <font-awesome-icon icon="search"/>
</b-button>

Вот моя функция в файле App.vue:

<script>
export default {
  name: 'topnavbar',
  data () {
    return {      
      nsize: "sm",
      mediaWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    }
  },
  mounted () {    
    if (window.addEventListener) {
      window.addEventListener("resize", this.updateSize, false);
    } else if (window.attachEvent) {
        window.attachEvent("onresize", this.updateSize);
    }
  },
  methods : {
    updateSize: function (){    
      let sizeEl = "md";  
      let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      if(width <= 576){
        sizeEl = "sm";
      }
      this.nsize = sizeEl;      
    }
  }
}
</script>  

Источники :

• Получить размеры окна просмотра браузера с помощью JavaScript
• https://fr.vuejs.org/v2/guide/class-and-style.html

Answer 2

Я не думаю, что есть что-то встроенное для адаптивных кнопок в начальной загрузке, вам, вероятно, было бы лучше расширить существующие размеры кнопок начальной загрузки в запросах sass / media, т.е.

.responsive-button {
  @media (min-width: 576px) { @extend .btn-sm }
  @media (min-width: 768px) { @extend .btn-md }
}

IЯ не проверял это, поэтому, возможно, придется исследовать немного дальше, но, надеюсь, это поможет вам:)