мкр-кнопка изменения размера размера шрифта, чтобы соответствовать размеру кнопки

Question

Я использую md-button, который содержит текст

проблемы, когда я нахожусь в низком разрешении текст вырежется и я не могу найти правильное решение, чтобы исправить это

если возможно, предложите, как это сделать.

Я приложил скриншот в высоком и низком разрешении + в CSS и HTML

<md-dialog id="new_test_draft_dialog" flex=40 flex-md=50 flex-sm=60 flex-xs=80> 
    <div> 
     <div layout-padding> 
      <h2>Save Changes?</h2> 
      <div style="padding:5px;" layout-padding> 
       <div layout="row" layout-align="center center"> 
        <md-button ng-click="draftDialogService.cancel()" class="button_type_1 active">Continue</md-button> 
        <md-button ng-click="draftDialogService.hide()" class="button_type_1 active">Discard</md-button> 
        <md-button ng-click="draftDialogService.hide(saveDraft())" class="button_type_1 active">Save draft</md-button> 
       </div> 
      </div> 
     </div> 
    </div> 
</md-dialog> 

CSS-код:

/* Buttons */ 
.button_type.md-button, 
.button_type, 
.button_type_1 { 
    border: 3px solid #fff; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    -moz-background-clip: padding; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    padding: 5px 5px; 
    color: #fff; 
    display: inline-block; 
    text-decoration: none; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -ms-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
    word-wrap: break-word; 
} 

Answer 1

Вот альтернативное решение вашей проблемы - CodePen

Идея состоит в том, чтобы изменить расположение кнопок в соответствии с размером экрана (отзывчивым). Я думаю, что это больше соответствует способу Углового Материала.

Разметка

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
    <div layout-gt-xs="row" layout-xs="column" layout-align="center center"> 
    <md-button class="md-raised md-primary">Continue Adding</md-button> 
    <md-button class="md-raised md-primary">Discard Changes</md-button> 
    <md-button class="md-raised md-primary">Save Draft And Exit</md-button> 
    </div> 
</div> 

Angular Material layout