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

Question

There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most

Answer 1

1. Design in percentages and initially optimized for a 15"+ screen.

2. Review what components you want to see on a phone - just keep essential content and remove elements that don't work or clutter the small screen. These styles can be contained within @media (max-width: 480px) { ... }

3. As things move to 10" or less, redesign your buttons and interactive components for fingers rather than mouse. @media (max-width: 767px) { ... }

4. Shrink the width of your browser. When things don't look so good, get in to the console and figure out what styles can be changed or items that need to be redesigned or removed. Mark what screen width they occur at and create a media query.

5. At the end, review your media queries to see if some of them can be grouped together (ie if you have one at 750 and 767 pixels width, you might just as well with combining them in the 767).

If you are comfortable w jQuery you can add

$(window).resize(function(){
  console.log($(window).width());
}); 

to get the current screen size. Add a few extra pixels for good measure.