html - Material-ui 1.3 fontsize 不响应屏幕宽度？

Question

我正在尝试使用新的 material-ui (v1.3) 构建一个具有基于屏幕宽度的响应式字体大小的应用程序。我有一个抽屉，上面有一个用于导航的菜单。当屏幕尺寸较小时，我希望能够缩小字体大小(以及页面上的其他内容)。 我有以下代码，当我在浏览器中手动缩小屏幕时，它似乎不起作用。字体大小会改变，但实际上我必须刷新页面才能看到变化？？在我使用的最后一个版本 (v.0.13) 中，它会随着屏幕尺寸的变化而缩小，方法是通过用鼠标单击并拖动来手动缩小浏览器尺寸并使其变小。有没有人知道为什么会这样？

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        open: false,
    };
}


getDrawerFontSize() {
    if (window.innerWidth <= 575) {
        return '10px';
    } else if (window.innerWidth <= 767) {
        return '11px';
    } else if (window.innerWidth <= 991) {
        return '12px';
    } else if (window.innerWidth <= 1199) {
        return '13px';
    }
    return '14px';
}

render() {
    const drawerFontSize = this.getDrawerFontSize();
    const { open } = this.state;

    const theme = createMuiTheme({
        overrides: {
            MuiDrawer: {
                paper: {
                    background: '#333333',
                    borderRadius: '0',
                    width: '250px',
                    padding: '0 10px',
                    color: 'white',
                    marginTop: '80px',                        
                },
                paperAnchorDockedLeft: {
                    borderRight: '0px',
                },
            },
            MuiTypography: {
                subheading: {
                    color: '#999999',
                    fontSize: drawerFontSize,

                },
            },
            MuiListItemIcon: {
                root: {
                    color: '#999999',
                },
            },
            MuiListItemText: {
                root: {
                    paddingRight: '5px',
                    paddingLeft: '5px',
                }
            },
            MuiDivider: {
                root: {
                    backgroundColor: '#999999',
                },
            },
        },
    });

    const styles = {
        app: {
            backgroundColor: 'black',
        },
        appBar: {
            backgroundColor: '#333333',
        },
        titleBar: {
            backgroundColor: '#111111',
            height: '35px',
            width: '100%',
        },
        venn: {
            height: '50px',
            display: 'inline-block',
            verticalAlign: 'middle',
        },
        logo: {
            height: '80px',
            width: '80px',
            display: 'inline-block',
            verticalAlign: 'middle',
        },
        appHeader: {
            backgroundColor: 'black',
            height: '150px',
            padding: '20px',
            color: 'white',
        },
        menuButton: {
            marginLeft: -12,
            marginRight: 20,
        },

        appTitle: {
            fontSize: '1.5em',
        },
        appIntro: {
            fontSize: 'large',
        },
        rightImages: {

            marginLeft: 'auto',
            marginRight: -12,
        },
        drawer: {
            width: '150',
            position: 'relative',
        },
        title: {
            marginRight: '15px',
            verticalAlign: 'middle',
            display:'inline-block',
        },
        activeLink: {
            textDecoration: 'none',
            color: 'white',
        }


    }

return (

    <MuiThemeProvider theme={theme}>
  <div style={styles.app}>
      <AppBar style={styles.appBar} position="static">
          <Toolbar >
              <div style={styles.drawerHeader}>
                <Typography style={styles.title} variant="display2"  color="inherit">
                  My APP
                </Typography>
                <img src={venn} style={styles.venn}/>
              </div>
              <section style={styles.rightImages}>
                  <img src={logo} style={styles.logo}/>
              </section>
          </Toolbar>
      </AppBar>
      <Drawer variant={"permanent"} anchor="left">
          <div
              tabIndex={0}
              role="button" >

                  <List component="nav">
                      <NavLink style={styles.activeLink} to="/" href="/">
                      <ListItem button >
                          <ListItemIcon>
                              <HomeIcon />
                          </ListItemIcon>
                          <ListItemText primary="Home" />
                      </ListItem>
                      </NavLink>


                      <Link style={styles.activeLink} to="/account" href="/account">
                      <ListItem button>
                          <ListItemIcon>
                              <PersonIcon />
                          </ListItemIcon>
                          <ListItemText primary="My Account" />
                      </ListItem>
                      </Link>
                      <Link style={styles.activeLink} to={"/logout"} href="/logout">
                      <ListItem button>
                      <ListItemIcon>
                          <ExitIcon />
                      </ListItemIcon>
                      <ListItemText primary="Logout" />
                      </ListItem>
                      </Link>
                  </List>
              <Divider />
              <List component="nav">
                  <Link style={styles.activeLink} to={"/help"} href="/help">
                      <ListItem button>
                          <ListItemIcon>
                              <HelpIcon />
                          </ListItemIcon>
                          <ListItemText primary="Help" />
                      </ListItem>
                  </Link>
              </List>
          </div>
      </Drawer>


      <div>
          <Router />
      </div>
  </div>
    </MuiThemeProvider>
);

}

导出默认 withRouter(connect( mapStateToProps, mapDispatchToProps)(App));

Answer 1

您可以通过多种方式制作响应式字体:
1)使用JavaScript:
- 就像你可以使用 java 脚本库(即 http://simplefocus.com/flowtype/ )
2)使用CSS:
- 代替 px 使用 vw 或 vh -
- 1vw = 视口(viewport)宽度的 1%
-1vh = 视口(viewport)高度的 1%
-1vmin = 1vw 或 1vh，以较小者为准
-1vmax = 1vw 或 1vh，以较大者为准

或者
您可以在 css 中使用媒体查询
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

谢谢!!希望对您有所帮助。