Commonly used media queries for supporting almost every device.
A responsive web designing means One site for every screen like Small , Medium and Large with help of HTML5 and CSS3 . Before HTMl5 and CSS3 there is a tradition that every screen or device has its own website. For example mobile site is different from desk top site resulting heavy development hours , efforts
and client pocket also 
For designing a responsive site every web designer has some confusions which type of screen sizes he should use and what is the optimal minimum and maximum widths for media queries . After a long research i have found some common media queries that supports almost all mobile devices.
I have done research for below mobile ,tablets and desktop screens
- Iphone 5 (320 x 568)
- Galaxy S III (360 x 640)
- Lumia 920 (384 x 640)
- Iphone 4 (320 x 480)
- Even Older Smartphones
- Nexus One (480 x 800)
- Droid 2 (480 x 854)
- iPad (1024 x 768)
- Galaxy Tab 10.1 (1280 x 800)
- Galaxy Tab 2 (10.1) is the same,
- Kindle Fire HD 7″ is also.
- Kindle Fire (1024 x 600)
- Kindle Fire HD 8.9″ (1920 x 1200)
Below is common fix for media queries
/* Large desktop */ @media (min-width: 1200px) { } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { } /* Landscape phones and down */ @media (max-width: 480px) { } |
Please let me know if you have better media queries or any issues with these