Oops, I mean any-pointer

This discussion was helpful: https://bugs.webkit.org/show_bug.cgi?id=209292

can you please suggest me,
How can i check the mac view on desktop window 10

Unfortunately, chrome web inspector tools are not entirely reliable for evaluating iPhone media queries for Safari.

my example would be an iPad that has a 1200px screen I don’t want it to show the desktop design, but at the same time desktop screens at 1200px should still work with the desktop look.

This might be way too late. But for anyone that might find this helpful…
If you encounter this issue, what I found works best is if you put your @media (min-width: …) before your @media (max-width: …) it does not override it.

I have two questions.

Are rem units for font-size recommended with media queries? Or are other unit types better (like px) with media queries?
What are the “gotchas” (if any) for offloading media queries to their own external style sheet from an already lengthy style sheet?

Thanks again!

I ran into the same issue.

Check the browsers they are using – you’re most likely testing in Chrome.

When I test in an emulator the devices highlighted the site looks fine, but still for some devices it seems not to work.

Any ideas?
https://www.servertrafficweb.com/offshore-dedicated-server.html

Hey there! I’d suggest writing all of your styles as though they are mobile styles. Then, as you need additional styling for larger screens, use a media query to target those styles.

Here’s an overgeneralized example:

body {
  background: #f8a100;
  font-size: 16px;
}

@media (min-width: 700px) {
  body {
    font-size: 18px;
  }
}

@media (min-width: 1000px) {
  body {
    font-size: 20px;
  }
}