Material-ui 1.3 fontsize not responsive to screen width? - html

Question

I'm trying to build an app that has responsive font sizes based on the screen width with the new material-ui (v1.3). I have a drawer with a menu on it for navigation. I'd like to be able to shrink the font size (among other things on the page), when the screen size is smaller.
I have the following code and it doesn't seem to work when I shrink the screen down manually in the browser. The font size will change but I actually have to refresh the page to see the changes?? With the last version I used, (v.0.13) it would shrink as the screen size was changing, by manually making the browser size smaller with clicking and dragging with mouse and making it smaller. Does anyone have any ideas as to why this is happening?
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>
);
}
}
export default withRouter(connect( mapStateToProps, mapDispatchToProps)(App));

Answer 1

You can make responsive font by multiple way :
1) Using JavaScript :
- Like you can use java script Library (i.e. http://simplefocus.com/flowtype/)
2) Using CSS :
- In place of px use vw or vh -
- 1vw = 1% of viewport width
-1vh = 1% of viewport height
-1vmin = 1vw or 1vh, whichever is smaller
-1vmax = 1vw or 1vh, whichever is larger
OR
You can use Media Query in css
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Thanks!! Hope it Helps.