Question

I’m working on a project and we are gone do a responsive design and use media queries. Now I read Adaptive Web Design by Aaron Gustavson, Responsive Web Design with HTML5 and CSS3 by Ben Frain and other online sites. It’s one thing tho I’m still kinda not sure how I’m gone do and thats the media queries for my selected widths.

We decided to do it twitter bootstrap style (not using it tho) where it snaps into place rather then having it fluid.

3 types
mobile – size?

tablet – 980px (both landscape and portrait
screen – 1160px

My question is what media queries should i go with to cover that? I truly appreciate help, this is one of the hardest parts for me.

Answer 1

The LESS framework and Twitter Bootstrap both take interesting approaches.

LESSframework targets 4 modes:

• Large – 992px w +
• Tablet – 768px w
• Mobile 1 – 480px w
• Mobile 2 – 320px w

Twitter Bootstrap targets five:

• Large – 1200px w +
• Big – 980px w
• Tablet – 768px w
• Mobile 1 – 480-767px w
• Mobile 2 – < 480px w

I would suggest using one of these (or another) responsive CSS frameworks and/or LESS/SASS in order to achieve what you’re trying to do.