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

by

Device-width refers to the display’s resolution (eg. the 1024 from 1024×768), 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.

More Related Contents:

  1. Media Queries: How to target desktop, tablet, and mobile?
  2. Why does the order of media queries matter in CSS?
  3. What is the difference between “screen” and “only screen” in media queries?
  4. Twitter Bootstrap 3: how to use media queries?
  5. CSS @media print issues with background-color;
  6. Common breakpoints for media queries on a responsive site
  7. Should I use max-device-width or max-width?
  8. Media query to detect if device is touchscreen
  9. Common CSS Media Queries Break Points [duplicate]
  10. CSS media query to target only iOS devices [duplicate]
  11. What are the rules for CSS media query overlap?
  12. What does @media screen and (max-width: 1024px) mean in CSS?
  13. CSS native variables not working in media queries
  14. @Media min-width & max-width
  15. Extending selectors from within media queries with Sass
  16. Which are the most important media queries to use in creating mobile responsive design?
  17. IE7, IE8 support for css3 media query [duplicate]
  18. calc() not working within media queries
  19. Max-Width vs. Min-Width
  20. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  21. How to make responsive table [closed]
  22. iPhone X / 8 / 8 Plus CSS media queries
  23. How to control number of items per row using media queries in Flexbox?
  24. How do I combine two media queries?
  25. How can I avoid media query overlap?
  26. Media Query grouping instead of multiple scattered media queries that match
  27. Single vs multiple stylesheets in responsive web design
  28. @import styles not working in a media query
  29. Media queries and background images
  30. @media query not working in mobile. Works fine in Chrome

Leave a Comment