Media queries deprecated?

Question

I was trying to do a device-detection (for smartphones, tablets and notebooks) and I ended up in this SITE that shows pretty much all I needed. Unfortunately I was told that those queries (ex: device-width) were deprecated!

Is there any workaround to this?

Answer 1

From my practice so far, I can tell that device-specific media queries are most definitely not the right thing to do. The thread that you just posted also includes this statement:

If you're reaction to this is: you should never base your breakpoints on devices!! You have a good point.

Mobile-first approach is also a thing that I do not practice. (from minimum-width up)

The best practice that fits in all of my projects, be it thus an app or a simple website, incorporate the max-width media queries, which start from your main resolution and finish at the smallest possible screen.

The trick is not to use a strict set of resolutions, but to use the required resolution for your specific problem while resizing the viewport.

Just go to MDN and read about media queries. Use min-width queries only for resolutions above 1920px and stick to max-width for lower-res.

Most generic media query that you can put to use without worrying:

@media screen and (max-width: *px) {}

---

Where the * is the pixel width value of the viewport width that You want to address.

Answer 2

All that Sqnkov wirtten here applies, so in big shortcut use max/min-width instead.

But there is always a but and here is why... If you are interested in pixel perfect solution you should consider adding to you arsenal max/min-resolution for modern browsers and device-pixel-ratio for older ones (CanIUse: Media Queries: resolution feature) for detecting high dpi screens. Reason behind this is not to force users to use magnifying glass when using such display i.e. retina displays or 4k gamer screens. On topic of where and how to put your breakpoints I really like Responsive UI chapter of Material Design guideline. They use dp unit which is relative unit based on screen density (more about the topic here (Material) and here (MDN)). If you like what they did in the area of responsiveness simply check their CSS rules from under F12 dev tools, where they (at the time of writing) look like this:

@media only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:800px),
       only screen and (min--moz-device-pixel-ratio:2) and (max-width:800px),
       only screen and (min-resolution:192dpi) and (max-width:800px),
       only screen and (min-resolution:2dppx) and (max-width:800px)

In other words to make long story short and to refine Sqnkovs answer you may want to take under consideration screen density as well.