I do try to write the Media Query for Samsung SM-J810F Galaxy J8 1480 x 720 .
I write on Media Query;
@media only screen and (device-width: 30.8125em)
and (device-height: 15em)
and (-webkit-min-device-pixel-ratio: 2)
and ( min--moz-device-pixel-ratio: 2)
and (orientation: landscape) {
Here how to show on Firefox
Here how to show on Chrome;
How to see, on Chrome to show the nav different…, also to come an Element which I will not display it, it displays on Chrome but not on Firefox…
Can please anyone explains my mistake, because display this element on Chrome.
You need the show the CSS relevant to that set of elements, just showing a media query isn’t terribly helpful.
Also, same question as previously: why are you trying to target specific devices using specific widths? Are you literally trying to write media queries for every actual physical device? Because there are thousands and thousands of different devices, that’s not what media queries are for. You could basically spend the rest of your life doing this, and it’s waste of time
If you really need to do device specific media queries, you definitely want the width in pixels, not ems. I looked further into the whole “using ems for media queries” thing, and it looks like it was done to get around a Safari zoom bug that has since been fixed. Using ems for a device width is basically hardwiring the assumption that 1em = 16px but that’s only true if the browser hasn’t set a different base size. And some do.
Then again, do you really want a thousand different breakpoint definitions to maintain? The whole point of responsive layout is to not have to worry about minor differences like that.
I can’t stress enough that (unless you have an incredibly good reason for targeting a specific device and media queries are literally the only way you can do it) it is a complete and utter waste of time writing media queries for every device on earth.
The process should be something like, using the responsive view in a browser:
Write CSS for an element/group of elements (eg a navbar) that looks good at a small screen size
Increase the screen size until your element breaks visually. Write a media query to provide CSS to fix it (and (min-width: 600px) for example).
Repeat 2 until you’ve covered up to wide desktop size (and tbh you should rarely need to go past step 2).
Or you can go in reverse, start at desktop and go down. Starting at mobile is normally easier. Trying to target every device is nuts because
Those are conventional generic breakpoints, made popular by bootstrap. One of them may reference the iPad, but 1024x768 was a pretty common resolution going way back to olden times.
My final piece of advice on this matter: Use those. Just those.
I looked at the post you referenced, and as one example of why what you’re trying to do is completely futile:
You cannot hover, it’s not physically possible. There’s absolutely zero point in very carefully trying to target devices because of near-imperceptible differences in rendering, particularly when the thing you’re trying to account for doesn’t work on the device. And these are crude simulators (they aren’t even the real thing!).
You generally cannot hover on a phone because it’s not physically possible. Think about this logically. Some devices/browsers “implement” it in different ways (one click to hover, then another to activate for example), but they aren’t under any obligation to. A very few devices can tell whether a user has a finger above an area of screen: this allows for them to determine pointing behaviour, but hover effects are generally still pointless because a person’s finger is generally going to obscure the thing they’re hovering over.
Exactly like I said. Make the site work at a small size. Like literally a small size, make the browser window about the size of a small smartphone screen. Then once it all works, increase the size until something breaks. Then write a media query for that size to fix the thing that broke.
Or go from desktop size, make it work there, then make the screen smaller until something breaks
Make the viewport small by opening the responsive tools in the browser and setting the width to something like 400px.
Make the site work, using CSS.
Once it all works, move your mouse to point at the right hand side of the responsive viewport, drag right to increase the width.
Once something on the site breaks, write a media query to fix it. eg if the navbar needed to change style at 600px, write @media screen and (min-width: 600px) { and write some CSS to fix the issue.
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 274dpi),
only screen and ( min-resolution: 2dppx) {
Tomorro i will to try as you to me to say…
you mein this…
@media screen and (min-width: 80em) {}
@media screen and (max-width: 80em) and (min-width: 60em) {}
@media screen and (max-width: 60em) {}