css - 移动设备中的 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>

它应该是什么样子(更高分辨率的屏幕截图):

对于 370px，它会中断并看起来像这样:

Answer 1

这是给你的一个想法:https://codepen.io/panchroma/pen/xBZwbr

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

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

希望这对您有所帮助!

---

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;
  }
}