Which are the most important media queries to use in creating mobile responsive design?

by

I’d recommend taking after Twitter’s Bootstrap with just these four media queries:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Edit: The original answer (above) was taken from Bootstrap version 2. Bootstrap has since changed their media queries in version 3. Notice that is there is no explicit query for devices smaller than 768px. This practice is sometimes called mobile-first. Everything outside of any media query is applied to all devices. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Check it out on Bootstrap 3’s docs.

More Related Contents:

  1. Common breakpoints for media queries on a responsive site
  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. Media query to detect if device is touchscreen
  17. CSS media query to target only iOS devices [duplicate]
  18. Responsive CSS triangle with percents width
  19. Media Queries for Different zoom Levels of Browser
  20. CSS native variables not working in media queries
  21. Customize Bootstrap 4’s grid-system Breakpoints
  22. CSS media queries min-width and min-device-width conflicting?
  23. calc() not working within media queries
  24. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  25. Auto height on parent container with Absolute/Fixed Children
  26. Set div height equal to screen size
  27. How do I combine two media queries?
  28. Media queries and background images
  29. Sass and rounding down numbers. Can this be configured?
  30. @media media query and ASP.NET MVC razor syntax clash

Leave a Comment