Question

spec表示当屏幕宽度为460dp或更低时，fab按钮应从56dp调整为40dp。

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

问：有没有适当的＆＃39;方式，如果是这样，它是什么？ TX。

示例代码（使用＆＃39;整页＆＃39;选项并将屏幕大小调整到460px以下以查看工厂更改）：

＆＃13;

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

＆＃13;

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

＆＃13;

什么是适当的＆＃39;使用MDC Web时自动调整fab按钮的方法

0 个答案: