Question

我正在构建一个简单的webapp，我正在使用angularjs和angular材料。我正在使用cpuple <md-button class="md-fab">Hi</md-button>，我希望它们非常大。我的宽度，高度等于400px。但随着屏幕变小，我希望它在最小的屏幕上缩小到115px的大小。我已经尝试了很多东西，但我目前的解决方案是制作一堆不同的按钮，并在屏幕达到一定大小时对它们应用ng-show。

这个解决方案有效，但它是重复的，当我改变关于按钮的一件事时，我现在需要做5次。这个问题有更好的解决方案吗？

我的html代码如下：

HTML

<!--width >= 1280px-->
<div hide show-gt-md flex="100"  class="md-padding" layout="row" layout-align="space-between">

  <div flex="33">
    <md-button flex style="height: 400px; width: 400px; background-color: #0b97c4; " class="answerButtons md-fab" aria-label="Eat cake"><h1 class="headerText">Pepsi</h1></md-button>
  </div>

  <div flex="33" style="margin: auto">
    <div style=" height: 250px; width: 250px;  border-radius: 150px; margin: auto; text-align: center" md-whiteframe="3">
      <h1 class="headerText" style="margin: auto; vertical-align: middle; line-height: 250px">VS.</h1>
    </div>
  </div>
  <div flex="33">
    <div>
      <md-button style="height: 400px; width: 400px;" class="md-fab" aria-label="Eat cake"><h1 class="headerText">Coke</h1></md-button>
    </div>
  </div>

</div>

<!--960px <= width < 1280px-->
<div hide show-md flex="100"  class="md-padding" layout="row" layout-align="space-between">

  <div flex="33">
    <md-button flex style="height: 300px; width: 300px; background-color: #0b97c4; " class="answerButtons md-fab" aria-label="Eat cake"><h1>Pepsi</h1></md-button>
  </div>

  <div flex="33" style="margin: auto">
    <div style=" height: 200px; width: 200px;  border-radius: 150px; margin: auto; text-align: center" md-whiteframe="3">
      <h1 style="margin: auto; vertical-align: middle; line-height: 150px">VS.</h1>
    </div>
  </div>
  <div flex="33">
    <div>
      <md-button style="height: 300px; width: 300px;" class="md-fab" aria-label="Eat cake"><h1>Coke</h1></md-button>
    </div>

  </div>

</div>

<!--600px <= width < 960px-->
<div hide show-sm flex="100"  class="md-padding" layout="row" style="overflow: visible;">

  <div flex="40">
    <md-button flex style="height: 215px; width: 215px; background-color: #0b97c4; " class="answerButtons md-fab" aria-label="Eat cake"><h1>Pepsi</h1></md-button>
  </div>

  <div flex="20" style="margin: auto">
    <div style=" height: 115px; width: 115px;  border-radius: 150px;  bottom: 0; margin:auto; text-align: center" md-whiteframe="3">
      <h1 style="margin: auto; vertical-align: baseline; line-height: 125px">VS.</h1>
    </div>
  </div>
  <div flex="40">
    <div>
      <md-button style="height: 215px; width: 215px;" class="md-fab" aria-label="Eat cake"><h1>Coke</h1></md-button>
    </div>

  </div>

</div>

<!--width <= 600px-->
<div hide-gt-xs flex="100" layout="row" style="overflow: visible;">

  <div flex="40">
    <md-button flex style="height: 115px; width: 115px; background-color: #0b97c4; " class="answerButtons md-fab" aria-label="Eat cake"><h1>Pepsi</h1></md-button>
  </div>

  <div flex="20" style="margin: auto">
    <div style=" height: 65px; width: 65px;  border-radius: 150px;  bottom: 0; margin:auto; text-align: center" md-whiteframe="3">
      <h1 style="margin: auto; vertical-align: baseline; line-height: 65px">VS.</h1>
    </div>
  </div>
  <div flex="40">
    <div>
      <md-button style="height: 115px; width: 115px;" class="md-fab" aria-label="Eat cake"><h1>Coke</h1></md-button>
    </div>

  </div>

</div>

正如您所看到的，代码非常混乱，改变任何事情都是一种真正的痛苦。如果可以，请帮忙！

Angular Material FAB按钮不会调整

0 个答案: