css media query to handle new high resolution mobiles whilst ignoring tablets

Question

According to my research; new smart phones portrait resolution is up to 800px
tablets miniumum portrait resolution 600px

Now I\'m trying to use media queries to

Answer 1

I think the philosophy you're trying to base your media queries on is flawed from the start: As quoted often by Ethan (the "inventor" of the technique) breakpoints shouldn't derive from screen/device sizes but from how the content fits naturally to the page. Start building mobile-first with basic styles for typography and color, then as your screen grows, use min-width:500px (for example) to add some layout/columns, and keep going until you think you take advantage of the available space in desktop wide 22inch resolutions like 1900px and above. I did that for my blog ( http://www.gplus.gr/blog ) - developed only with Chrome in Desktop, and when went to check the website in other devices it worked like a charm: Android 2.x , Android 4.x , Kindle, iPad etc etc..

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/