The spec says that a fab button should be resized from 56dp to 40dp when the screen width is 460dp or less.
I'm using mdc web components and this does not happen automatically. One may attain this by applying the style mdc-fab--mini to the button. However, it seems unnecessary to do this programatically, so I set a media query breakpoint at 460px and set the width and height manually. This works fine because at the moment that's all the mdc-fab--mini class does. However, there may be a more correct way to do this.
Q: Is there a 'proper' way and if so, what is it? Tx.
Example code (Use 'full page' option and resize screen to below 460px to see fab change):
.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>