md-button 调整字体大小以适应按钮大小

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

这个想法是根据屏幕大小（响应式）更改按钮的布局。我认为它更符合 Angular Material 的做事方式。

标记

<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