Common breakpoints for media queries on a responsive site

by

Also, I would definitely recommend using device-width for your mobile sizes, unless you want users to see your mobile styles when they resize their browser window on a non-mobile device. width is the width of the viewport, and device-width is the current resolution of the device.

Also, I think I have read that some mobile devices don’t behave as expected (with @media).

You are correct. Many devices will not give you the width or device-width that you expect, especially when switching between landscape and portrait (they will often give the landscape width when in portrait). Device auto-zooming can also throw a wrench into things. Using the viewport meta tag can help with many of these issues. (More info on that here)

More Related Contents:

  1. Which are the most important media queries to use in creating mobile responsive design?
  2. Media Queries: How to target desktop, tablet, and mobile?
  3. Why does the order of media queries matter in CSS?
  4. Should I use max-device-width or max-width?
  5. Common CSS Media Queries Break Points [duplicate]
  6. What are the rules for CSS media query overlap?
  7. @Media min-width & max-width
  8. CSS media queries – Order matters?
  9. Responsive css styles on mobile devices ONLY
  10. How to make responsive table [closed]
  11. How to code CSS media queries targeting ALL mobile devices and tablets?
  12. How can I avoid media query overlap?
  13. Bootstrap – Removing padding or margin when screen size is smaller
  14. Single vs multiple stylesheets in responsive web design
  15. Media Queries – Mobile vs Desktop Browser
  16. Does “display:none” prevent an image from loading?
  17. CSS @media print issues with background-color;
  18. Media query to detect if device is touchscreen
  19. CSS media query to target only iOS devices [duplicate]
  20. Responsive CSS triangle with percents width
  21. Media Queries for Different zoom Levels of Browser
  22. Customize Bootstrap 4’s grid-system Breakpoints
  23. CSS media queries min-width and min-device-width conflicting?
  24. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  25. How to control number of items per row using media queries in Flexbox?
  26. Make table cells square
  27. How do I combine two media queries?
  28. Media Query grouping instead of multiple scattered media queries that match
  29. Media queries and background images
  30. Sass and rounding down numbers. Can this be configured?

Leave a Comment