Device width and height in material-ui
Question
I am trying to add the specific width and height of (Iphone 7 Plus) only. For the project I am using withStyles.
import { withStyles } from "@material-ui/core";
I tried using:
"@media (width: 414px) and (height: 628px)": {}
I tried "@media (device-width: 414px) and (device-height: 628px)": {} Tried both examples and is not working. Does someone have any ideas how to do it? Thank you
4 answers
solution1
3 2020-11-28 05:58:55
There is nothing wrong in your media query, but you haven't provided the full code, so I'm suspecting that either you are writing the media query in the wrong place or might have misused the withStyles() .
So right now I'm working on a project which uses Material UI.
I tried adding media query specified by you in my styles for the <Toolbar> which resides inside the <AppBar> component. By default the toolbar is using the dark blue accent as a background color (set inside the global theme).
The media query will override the background color with #000 when it has screen width: 414px and height: 628px .
Here's the working code for you, created using a template from MUI docs and added media query in the styles:
Try adjusting the screen size in the output window, you'll see media query affecting the styles.
Explanation:
Make sure you are following these two things:
- I am using
makeStyles()hook, whereas you are usingwithStyles(), doesn't have any difference between these two. But make sure that if you have function component then you should usemakeStyles()anduseStyles()hook calls to apply styles, Or else if you are using class component then you can go withwithStyles()way. - Also, make sure that you are not using the media-queries like we do it in the CSS. You need to use it inside the class, here my class is
toolbarwhich is key inside the styles. Used as aclassName={styles.toolbar}for the<Toolbar>component.
Here's my code:
function Navbar() {
const useStyles = makeStyles(() => ({
toolbar: {
'@media (width: 414px) and (height: 628px)': {
background: '#000',
},
},
}));
const styles = useStyles();
return (
<AppBar position="static">
<Toolbar className={styles.toolbar}>
</Toolbar>
</AppBar>
);
}
solution2
1 2020-11-27 14:42:22
Description
You can combine media queries. But you have to be aware of the syntax:
- Commata
,will separate the media-queries with a logical OR (eg a: true, b: false => true) it is like an enumeration of arguments (in this case: media queries) -
andwill logically combine two arguments (eg a: true, b: false => false) - There are other keywords like
not,only,orientation: landscape,orientation: portraityou may want to read about them too (note: this list may not be complete)
I think it is this, what you wanted:
Executable solution
You can find the solution below. Please note that it will only trigger at the exact screen size. You may need to resize your window. In Firefox/Chrome there is a debugger for screen-sizes where you can set a specific size for the window.
* { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .container { width: 414px; height: 628px; background-color: grey; } /* specific iphone7 style */ @media (min-width: 375px) and (max-width: 375px) and (min-height: 733px) and (max-height: 733px), (min-width: 414px) and (max-width: 414px) and (min-height: 628px) and (max-height: 628px) { .container-iphone7 { background-color: purple; } }
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <div class="container container-iphone7"> only styled at 414x628 or 375x733 </div> </body> </html>
solution3
0
Try using "vh" and "vw" and ur unit of size instead of "px",
vh means veiwport height,
vw means veiwport width.
7vh means 7% of the veiwport
solution4
0 2021-12-31 04:42:12
I'd suggest to use material ui breakpoints: https://mui.com/customization/breakpoints/#custom-breakpoints
Try creating an specific breakpoint for that device: ie
const theme = createTheme({
breakpoints: {
values: {
mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1200,
},
},
});
Let's say you add the iphone breakpoint, then to add css rules for only that specific breakpoint use theme.breakpoints.only(key) => media query :
const useStyles = makeStyles(theme => ({
paper: {
[theme.breakpoints.only('iphone')]: {
backgroundColor: 'red',
},
}
}));
Then on your function:
...
const classes = useStyles()
return (
<Paper className={classes.paper}>
</Paper>
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.