移动设备中的 Bootstrap 3.3 按钮 css 文本中断

Question

我遇到了一个按钮问题，该按钮的文本以较小的分辨率中断。我想让它响应，所以它在任何分辨率下都保持不变，我正在使用 Bootstrap 3.3

<button ng-show="vm.account.state === 'paused'" class="bm-badge bm-badge-danger "  ng-click="vm.corrigir()">
            <i class="fa fa-play"></i> Iniciar
        </button>

它的外观（更高分辨率的屏幕截图）：

使用 370 像素时，它会中断，如下所示：

Answer 1

这里有一个想法给你：https://codepen.io/panchroma/pen/xBZwbr

重要的是你想让你的按钮文本响应视口，一种方法是使用 vw 单位（视口宽度） 例如font-size:calc(10px + 1vw);

• 增加或减少 10px 将控制最小屏幕上的字体大小
• 增加或减少 1vw 将控制字体大小如何响应视口宽度

希望这会有所帮助！

---

HTML

<button  class="btn btn-danger ">
 <i class="fa fa-play"></i> Iniciar
</button>  

CSS

.btn{
  font-size:calc(10px + 1vw); /* the important bit */
  padding:10px 20px;
  border-radius:calc(10px + 2vw);
  box-shadow: 2px 3px 3px rgba( 0, 0, 0, 0.5 )
}


/* Optional: if space is tight, hide play icon at small viewport */

.fa.fa-play{
  display:none;
}

@media (min-width: 350px) {
  .fa.fa-play{
    display:inline;
  }
}