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

} }

使用路由器导出默认值（connect（mapStateToProps，mapDispatchToProps）（App））;

Answer 1

您可以通过多种方式制作自适应字体：
1）使用JavaScript：
-就像您可以使用Java脚本库（即http://simplefocus.com/flowtype/）一样
2）使用CSS：
-代替px使用vw或vh-
-1vw =视口宽度的1％
-1vh =视口高度的1％
-1vmin = 1vw或1vh，以较小者为准
-1vmax = 1vw或1vh，以较大者为准

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

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

Material-ui 1.3字体大小不响应屏幕宽度吗？

1 个答案: