3

规范说，当屏幕宽度为 460dp 或更小时，fab 按钮的大小应从 56dp 调整为 40dp。

我正在使用 mdc Web 组件，这不会自动发生。可以通过将样式 mdc-fab--mini 应用于按钮来实现这一点。但是，似乎没有必要以编程方式执行此操作，因此我将媒体查询断点设置为 460px 并手动设置宽度和高度。这很好用，因为目前 mdc-fab--mini 类就是这样做的。但是，可能有更正确的方法可以做到这一点。

问：有没有“正确”的方法，如果有，是什么？德克萨斯州。

示例代码（使用“整页”选项并将屏幕大小调整到 460 像素以下以查看工厂变化）：

.app-fab--absolute.app-fab--absolute {
  position: fixed;
  bottom: 24px;
  right: 24px;
}

/* applies to mobile mode */
@media(max-width: 480px) {
   .app-fab--absolute.app-fab--absolute {
      bottom: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
  }
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<script src="https://material-components-web.appspot.com/assets/material-components-web.js"></script>
<script src="https://material-components-web.appspot.com/assets/material-components-web.css.js"></script>

<button class="mdc-fab material-icons app-fab--absolute" aria-label="Add" data-mdc-auto-init="MDCRipple">
  <span class="mdc-fab__icon">
    add
  </span>
</button>

4

0 回答 0