CSS media queries min-width and min-device-width conflicting?

Device-width refers to the display's resolution (eg. the 1024 from 1024x768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn't maximized). If your resolution is large enough to get you in one break point, but the width of the browser is small enough to get you in another one, you'll end up with an odd combination of both.

Unless you have a legitimate reason to restrict the style sheets based on the resolution and not the size of the viewport, then just use min-width/max-width and avoid min-device-width/max-device-width.

device-width is deprecated in Media Queries Level 4. Refer to MDN docs here for more details.

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; Be aware that this feature may cease to work at any time.

So, width and height features should be used to consider the width and height of the viewport respectively.

P.S. These are range features they can be prefixed with min- or max- to express "minimum condition" or "maximum condition" constraints. Reference here.